فهرس الكتاب 

Aa a e a مقدمة ا‎ 
———— ——————— ———————" aʻa حول الکتاب والاستفادة‎ 
1 الباب الأول : مقدمة عامة د‎ 
000000000000000 "———v————A———————— الانترنت‎ 
200000000 020202 أنواع المواقع الإلكترونية‎ 
Buc xu xx M طريقة عمل المواقع الإلكترونية‎ 
E TEE AEE بس“7877إا"هكهلل2لممجح6ً*ضتةضيجقج.مجب.ج. ج.ْ.".ج.جحق<جلي‎ HTML الباب الثاني‎ 
| "——————————————————— HTML ga البداية‎ 
————————Ó—Á——————— إنشاء صفحة ويب‎ 
| "EDEN HTML Tags علامات ترميز‎ 
W (Editor HTML) HTML اك‎ jaa 
D —————— ——————— ÓÓO ( Headings HTML) HTML عناوين الك‎ 
P cuu M MEME yy (Paragraphs HTML) HTMLAI فقرات‎ 
lc — ————— ————— ——— مجأمجج‎ (Links HTML) HTML.Il روابط‎ 
pec (Images HTML) HTML التعامل مع الصور ال‎ 
 ————————————— (head HTML) HTML J| رأس‎ 
Mele uer M DIM MA IM pe CLA M EM mE (TEXT Formatting) HTML تنسيق نص ال‎ 
23 ب‎ (HTML font) HTML J خصائص الخطوط في‎ 
100000000000000 4١ه اوةةةة تك‎ ——— (Tables HTML) HTML J الجداول في‎ 
D M— —————————————— E (Lists HTML) HTML JI القوائم في‎ 
uH —————————————————— E HTML تطبيق عام حول ال‎ 
ui ———— ——— ——————————— —— خطوات التطبيق ذم‎ 
ا وال‎ Lu (HTML) شرح كود التطبيق‎ 
2300 E CSS الباب الثالث‎ 
0000 (Adobe Dreamweaver CS6) برنامج الدريم ويفر‎ 
PA ااا ااا‎ — —— * CSS ماهي لغة او تقنية ال‎ 
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طرق العمل على p CSSAl‏ 
عناصر هامة تستخدم ال CSS‏ في ال IOTER: (Span = Div) HTML‏ 
كود of‏ وسم (Divisions TAG) DVLII‏ 190 0 زا * ”2303# 
كود of‏ وسم (SPAN TAG) SPANI‏ ——— ————— ——— 
طريقة عمل ملف CSSA‏ وربطه بصفحة الموقع : 22370 
خاصية الوراثة € lí ————Ó—————————— —Á—‏ 
الكلاسات والهوية في ال (CSS Classes jid) CSS‏ مااع im —À—————————‏ 
خاصية ال aC ——————————————————M—— € Classes‏ 
خصائص الضبط في الكو ——————————————— c‏ 
خاصية الطول والعرض uu —————————— (CSS Width and Height)‏ 
E Ii‏ آلا (OSS‏ ل و ل ل ا —— ——————— nm‏ 
الخلفيات a ——————————————RRM (CSS backgrounds)‏ 
خاصية زوايا الحدود E (CSS border-radius)‏ اما ا ا اه ا ا لك م ف ا ا SE‏ 
خصائص النصوص (CSS Text Properties)‏ ا اا DER‏ اا 1 1 
خاصية i —————————————————— (Direction) eLa AMI‏ 
خاصية الإزاحة ip (Padding)‏ 
خاصية ( اللون - الحجم - اسم الخط - أخرى ) E‏ و EE‏ را 
خاصية الظل (Text Shadow)‏ 00 
خصائص الصورة ا ا 100 
خاصية حدة الحواف (Border-radius)‏ ا O‏ ا ا QC‏ 
خاصية التعليق E Ea (Comments)‏ لاه ااه مل ام لا Ol EEE ER‏ 
القوائم A OEA (Menus)‏ ل p ————————Á———‏ 
خاصية الحركة ea Aii as Ea A ea a ê a (Marquee)‏ و Vee‏ 
خاصية الخلفيات (Background)‏ لالع ——————————————— ONE‏ 
خواص الخلفية ASR O A E A N, (Background-position — Background-repeat)‏ 
اضافة الخطوط للموقع Neisseria‏ 
الباب الرابع MYSQL & PHP‏ ——— ———— 


MOBILE: 00967 714490030 muet 
MOBILE 2: 00967 772755202 Email: infoetechpio.net Í ١ 


1 —— ب‎ E A T PHP مقدمة حول‎ 
1 دبدببب0101‎ ——— M———— T (PHP) لغة البي اتش بي‎ 
11 متطلبات بي اتش بي ااا‎ 
N (wamp server) aaa ji السرفر المحلي وطريقة‎ 
p (Wamp Server) ) عمل السرفر‎ ä طريقة‎ 
lup 1 E E E M MM NI DIDA (PHP) اول تطبيق في‎ 
n ————————————— ا‎ as is في صفحات ت الويب‎ PHP تضمين كود‎ 
0000000 ا ا‎ EE, تضمين التعليقات في الكود‎ 
E ENERO NENNE ا‎ PHP أنواع البيانات في‎ 
0100000 0 ——————— اا اا ا‎ E E (Boolean) القيم المنطقية‎ 
EE ل‎ ose ملل‎ E مسا‎ aR ss (Integers) قيم الأعداد الصحيحة‎ 
ا‎ ———————————— ——— (Compound Data Types) البيانات المركبة‎ 
EM (Arrays) المصفوفات‎ 
I AM" (Variables) المتغيرات‎ 
Rp ——————————— —————— M (Expressions) التعبيرات‎ 
EOE ———OÁ—ÓÀ —M— (Assignment Operators) التعيين‎ gi عوامل الاسناد‎ 
bei clt EE MEUM EE (Logical Operators) العوامل المنطقية‎ 
I A ———————————Á'Á————— A (Equality Operators) عوامل المساواة‎ 
EE PEPA IER T TTET (Control Structures) قواعد التحكم‎ 
a P A N ا‎ E اا‎ TUR (Conditional Statements) تعليمات الشرط‎ 
ls The if Statement (if) تعليمة‎ 
LN ———————————Á—— Y (The switch Statement) تعليمة التبديل‎ 
(101090-9-009 (Looping Statements) Jj S ll تعليمات الحلقات ت او‎ 
NSS ———————————————— (The while Statement) while تعليمة‎ 
in ——————————————— (The do while Statement) do while &aalg 
VAN ااا بب0010000‎ Dee Cete Deere e De pod (The for Statement) (for) تعليمة‎ 
Ee ——————————————————— (Functions) الدوال‎ 
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nm c————————————— او ع ا‎ (Arrays) المصفوفات‎ 
(غ«ك1‎ 2086 (HTML Forms) نماذج الإدخال‎ 
N (Text Fields) ail حقول‎ 
ne ————————————————— (Checkboxes) خيارات‎ 
D ——————————————— ا‎ E (Submit Button) الإرسال‎ » 
no ب‎ ——— — H— (Drop-down list) القاكمة المنسدلة‎ 
p u—————————————————————— (Text area) منطقة النص‎ 
| ————————————————— $ GET 9$ POST دالة‎ 
(00 تطبيق حسابي باستخدام الدوال والفورم‎ 
N T AT AATETTA اا ااا‎ RR RER IRE MySQL and phpMyAdmin 
Dl mL Phpmyadmin عمليات‎ 
Pig NETT EHE إنشاء قاعدة بيانات‎ 
200 ةي‎ €—T— — إنشاء جدول في قاعدة البيانات‎ 
Y aaa a C" إضافة بيانات (صفوف) إلى الجداول‎ 
DL C ———————- تعديل وتحديث في قاعدة البيانات‎ 
nl" —— A — — RPM حذف صف أو ببانات من الجدول‎ 
n ————————————— ——— —" MYSQL ga PHP ربط‎ 
lr wm WU ATHE INSERT إدخال الببانات بواسطة‎ 
E ا ااا‎ A ا ا‎ SELECT إخراج البيانات بواسطة‎ 
D —— (UPDATE - DELETE) تعديل وحذف البيانات بواسطة‎ 
c ———Ó—Á——————————— ÜÓ——— M التعامل مع الصور‎ 
a e — ————M——— E, SESSIONI الحماية بواسطة‎ 
E EEE (COOKIES) الكوكيز‎ 
rl —————————— COOKIES والكوكيز‎ SESSION الفرق بين ال‎ 
ااا ااا اا ااا ا ااا ااا اا‎ NS تطبيق الكوكيز‎ 
ا‎ Lii e I IM ا ل‎ Efe ا ا ا ا ل‎ a o ا‎ E زالجي کویري‎ Query 
pus e M Tr OE TERR NEN القوالب الجاهزة‎ 
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تطبيق عام حول p ————— ——— E MYSQL & HTML & CSS & PHP‏ 
المرحلة الأولى (التصميم) ————————— p‏ 
المرحلة الثانية (قواعد البيانات) 3ب 23 
مرحلة ربط قواعد البيانات مع التصميم ———— ااا ا ا NE E E S E E‏ 
رفع الموقع على السرفر وإطلاقه n E‏ 
الاستضافة كاعد ٍِء و ب2هيييج ل — Á———‏ — 100000010000000 
خطوات رفع الموقع على الاستضافة E‏ 
الباب الخامس جوملا EE‏ 
(JOOMLA) Maga‏ وب 21*33( 
البداية مع i NT (JOOMLA!) Maga‏ 
مكونات جوملا! — IH‏ —"——————" 000 
العمل على "P v.o Maga‏ 1 
متطلبات العمل على جوملا lU TD‏ 
تنزيل جوملا من الموقع الرسمي وتركيبها O oo‏ 
تعريب نظام جوملا le —— H———————————‏ 
لوحة تحكم جوملا E — T‏ 
إنشاء الأقسام E E E E E E E M‏ 
التحكم بالمجلدات والصور اا ااا T‏ 
إضافة مقالات د #2« 
القوالب TU E [1 (Templates)‏ 
أماكن الموديولات (Module Positions)‏ هه -22 222 O‏ 
تركيب الموديولات a PE A A T E A EAA E E E A E N E‏ 
إنشاء القائمة وربطها بالأقسام —————————  —————‏ 
تعديل وإضافة شعار للموقع ll‏ 
التعديل في ملفات القالب (ملفات DL c ————— — ———— (CSS.‏ 
إضافات التواصل والمواقع الاجتماعية o‏ 
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ربط الموقع بصفحات التواصل —————— ———— ——— — 2323# 
تعريب الموديولات ع 511 
إضافة موديول البحث ET‏ 
تعديلات i: —————————— ——————————— &alc‏ 
caa S‏ المحرر u ———————————— (CE)‏ 
إضافة الحقوق للموقع i er‏ 
إضافة عنوان رئيسي M gall‏ ———— ———————— 7 
إضافة البيانات الوصفية ———————————— lC‏ 
حذف البيانات التجريبية خم —— ul‏ 
jamas‏ نسخة من الموقع للرفع ————— —————— lp E E Á—‏ 
تركيب الموقع 000:0 LE‏ 
الباب السادس A A A TT SEO‏ ل 
مقدمة حول محركات البحث 9 SEO‏ —— ل و ا 
كيف تعمل محركات البحث o‏ 
نصائح عامة لتطوير استراتيجية جيدة في pp —— ——————— (SEO)‏ 
أساسيات IDCM (SEO Basics)‏ 
تحسين هيكل الموقع الالكتروني اسن ع واد الالو ل لأا الو و ول لم لو لم i‏ 
التحسين الامثل لمحتوى الموقع aa IEEE E E NE E A E NE EIA E AT‏ 
التعامل مع خوارزميات او برامج البحث ايأر را 0 
متابعة وترقية الموقع الالكتروني iq‏ 
أدوات مفيدة لتعزيز نجاح الموقع في SEO‏ ———|— ل 
معد الكتاب الالكتروني A E A‏ 1 
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بسم الله الرحمن الرحيم 
الحمد لله والصلاة والسلام على حبيبنا محمد (صلى الله عليه وسلم) وعلى اله وصحبه وسلم وبعد : 


بداية نتمنى من خلال هذا الجهد المتواضع (كتاب تصميم المواقع الالكترونية) أن يجعلها الله في ميزان حسناتنا وأن ينال رضى 
واستحسان القارئ الكريم وأن يستفيد منه في حياته العلمية والعملية كما ونتمنى كل من يستفيد من هذا الكتاب ان يدعوا لنا ولوالدينا 
بالهداية والمغفرة والعفو والعافية والتوفيق دنيا وآخرة. 


إن هذا الكتاب الالكتروني يعتبر البداية لكل مبتدأ في عالم المواقع الالكترونية ومحطة انطلاق في تعلم كل جديد وما يفيد في تصميم المواقع 
الالكترونية واشهارها في محركات البحث وكان الغرض الرئيسي منه هو تعلم انشاء مواقع الكترونية بواسطة نظام ادارة المحتوى 
(Joomla!)‏ وبقية الفصول تم تعليمها لكي نعرف كيف نتعامل مع المواقع الالكترونية وكيف تعمل كماهي ايضا لمن يريد البداية في عالم 
المواقع. وللعلم فإن جميع الشروحات في هذا الكتاب وكل خطوة فيه تم تنفيذها وتطبيقها ونقلها كما هي شرحا وصورة وذلك ليكون التعلم 
مبني على اساس التجربة والخطوات الصحيحة وبكل وضوح بعيدا عن الغموض والسرعة وتعدي الخطوات. كما يتم سرد الاساسيات قبل 
تنفيذ عمل جديد ولذلك لابد من الانتباه في التسلسل والفهم لأن أكثر الخطوات تتطلب فهم واستيعاب التي قبلها. 


هذه هي النسخة الاولى من الكتاب وسيليها نسخ جديدة بتعاونكم أيها المستفيدين والقراء واقتراحاتكم واضافاتكم اليه عن طريق التواصل 
معنا وابداء الآراء وتصحيح الاخطاء ان وجدت. جميع التطبيقات في الكتاب بدء من JOOMLA : CSS : PHP : HTML‏ تم ارفاق 
رابط لجميع ملفاتها والتي تم تطبيقها خطوة بخطوة ويمكن الاستعانة بها وقت الحاجة. 

كما يتم من خلال هذا الكتاب فتح مجال التعاون التجاري والشراكة في مجال تصميم المواقع الالكترونية واشهارها واستضافتها عبر رواد 
التكنولوجيا والراعية لهذا الكتاب لمن يرغب. ستوفر رواد التكنولوجيا استضافة لكل من يرغب في عمل موقع الكتروني سواء خاص او 
تجاري وسنوفر ما يلزم من الدعم والحماية والمساحات الكافية لكل متعامل معنا. كما تقوم رواد التكنولوجيا بالتعامل مع كل من يقوم بعمل 
مواقع الكترونية ويحتاج للدعم خصوصا في نظام ادارة المحتوى (Joomla!)‏ وليس فقط من يقوم بعمل المواقع الالكترونية بل تم فتح 
مجال لمن يرغب بالتعامل معنا في مجال تسويق المواقع الالكترونية بالعمولة والتي لا تقل عن %٠١‏ لكل موقع يتم التسويق له او بإحضار 
عملاء لرواد التكنولوجيا دون ان يتحمل المسوق أي تبعات تصميم او فنيات أخرى. 


cc ip gil هذا والله ولي‎ 


للتواصل أو ابداء أي ملاحظات ولمتابعة أي إصدار جديد للكتاب زيارة موقعنا الالكتروني أو عبر صفحات التواصل الاجتماعي رابط 


www.techpio.net : الموقع‎ 
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حول الكتاب والاستفادة ia‏ 


كتاب دورة تصميم المواقع الالكترونية 


سواءً كنت حديث العهد أم خبيراً في التعامل مع المواقع الإلكترونيةء سيعلمك الكتاب طريقة انشاء المواقع الإلكترونية وطريقة عملها بدون برمجة 
معقدة. وليس المواقع الالكترونية فقط € يقدم الكتاب ايضا أيضًا رؤى فنية مفيدة حول إشهار المواقع بشكل عام نظريا وعملياً. 


* الذى ستستفيده من الكتاب‎ La 
بإمكانك إنشاء مواقع إلكترونية وباحترافية بأنواعها بمساعدة الأنظمة والبرامج الحديثة» علاوةً على خبرة في مجال المواقع والتوسع فيها يمكنك من‎ 


خلالها شغل وظيفة وبكفاءة في نفس المجال وتوفير الأموال بالنسبة للمؤسسات» فضلاً عن إمكانية الدخول في عالم التجارة الإلكترونية بدون برمجة 


وتعقيد وفي وقت قصير. 
من يمكنه الاستفادة من الكتاب ؟ 
يدعم الكتاب كل الاشخاص الراغبين في تعلم انشاء المواقع الالكترونية والخريجين والمهتمين في عالم المواقع الإلكترونية والتسويق الإلكتروني» وكل 


من لدية خبرات تسويقية ويحتاج لخبرة إلكترونية واهتمام في تنشيط تجارته ومؤسسته إلكترونيا والإعلان عبر الإنترنت ومن يبحث عن مهنة 
ومهارات جديدة وحديثة. 
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الباب الأول : مقدمة عامة 


الانترنت 

ظهرت شبكة الإنترنت نتيجة لمشروع أربانيت الذي أطلق عام 159١م c‏ وهو مشروع من وزارة الدفاع الأمريكية .أنشئ هذا المشروع من أجل 
مساعدة الجيش الأمريكي عبر شبكات الحاسب الآلي وربط الجامعات ومؤسسات الأبحاث لاستغلال أمثل للقدرات الحسابية للحواسيب المتوفرة. 
في وقتنا الحاضر أصبح الإنترنت من أساسيات التواصل والأعمال في جميع أنحاء العالم ويوما بعد يوم تزداد اهمية هذه الشبكة العملاقة التي جعلت من 
العالم قرية واحدة. أصبح الإنترنت بوابة للاقتصاد والسياسة والتواصل الاجتماعي لشعوب العالم ولاشك أيضا أنه اصبح العالم الرقمي الذي يتواصل 
الناس من خلاله تحولت جميع التعاملات التجارية وغيرها من العالم الحقيقي إلى العالم الرقمي ويعتمد عليه الكثيرين من التجار والباحثين والمؤسسات 
بمختلف مجالاتها. 


هي شبكة عالمية تربط بين حواسيب العالم وتسمح بتناقل البيانات بمختلف انواعها وبنطاقات (حجم التناقل ) مختلفة منها ما هو عبر شبكة محلية أو 


5 


عالمية. 
ماهي مواقع الإنترنت 


عبارة عن صفحات مبرمجة بأي لغة من لغات الويب تقوم بعرض وأخذ البيانات على شبكة الإنترنت. وتختلف المواقع عن بعضها من ناحية عملها 
وبرمجتها وطريقة عملها .ومن أمثلة لغات البرمجة المستخدمة في برمجة المواقع 


PHP with MYSQL DATABASES - ASP.NET with SQL SERVER DATABASES 


++ * ++ s+ * A 
أنواع المواقع الإلكترونية‎ 
مواقع ستاتييك : مواقع عادية تحوي صفحات ثابته لا تتغير إلا برمجيا بتغيير الكود الخاص بالصفحات وتقوم بعرض البيانات بشكل ثابت كما أنها غير‎ 


تفاعليه أي لا تحوي قاعدة بيانات لإدخال وإخراج البيانات. وهي الأقل استخداما على الإطلاق ويتم برمجتها غالبا ب لغة الوصف HTML‏ 


مواقع تفاعلية : مواقع تحوي صفحات انترنت تفاعلية تقوم بعرض البيانات من خلال قاعدة بيانات تستوردها الصفحات لتعرضها للمستخدمين وتقوم 
الصفحات ايضا بإدخال البيانات إلى قاعدة البيانات من خلال المستخدم المتفاعل مع الموقع سواء مدير الموقع او الزائر. وهي الأكثر استخداما ويتم 
برمجتها غالبا بأحد اللغات البرمجية التالية: PHP with MY SQL DATABASES - ASP.NET with SQL SERVER‏ 
DATABASES‏ . 
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طريقة عمل المواقع الإلكترونية 


Web Browser 


You request a Web page or file in 
your Web browser. 


Domain Name Service 
DNS checks the domain name of the 
Website you entered and finds the 
address of its Web server 


| " Hosted Web Server 


The site's Web server sends back the 
data for the requested Web page or file 


هنا شرح مختصر حول كيفية عمل المواقع الإلكترونية :عند إدخال عنوان الموقع في المتصفح الخاص بك أو النقر على رابطء هناك الكثير من الاحداث 
تدور وراء الكواليس لتحصل على المعلومات التي تبحث عنها وكي يظهر الموقع امامك بشكله الكامل . 


عند عرض موقع على شبكة الإنترنت» متصفحك يحتاج أولا إلى العثور على ملقم ويب كي يتم تحميل المعلومات منه. فمن خلال ال DNS‏ يتم التحقق 
من اسم الموقع إذا كان موجود على الإنترنت ام لا في حالة تم العثور على العنوان وأنه موجود على شبكة الإنترنت. يقوم السرفر الذي يحوي الموقع 
وصفحات الموقع بإرسال البيانات وصفحات الإنترنت الخاصة بالموقع المطلوب إلى متصفحك سواء الصور والبيانات وغيرها . 
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HIML 


HTML stands for Hyper Text Markup Language 


لغة وصف صفحات الويب 
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الباب الثانى HTML‏ 


++ 


HTML ga البداية‎ 


نبدأ في هذا الفصل مع أهم وأجمل وأبسط لغات صفحات الويب وهي لغة ال HTML‏ 
تعريف لغة ال HTML‏ : 

هي لغة لوصف صفحات الويب. 

هي لغة تقوم بترجمة صفحات الويب وعرضها على المتصفح. 


هي لغة ترميز تستخدم علامات الترميز. 


++ M ç 000 
Ek 


+ +e 


سنقوم سويا بتصميم اول صفحة ويب وأول موقع في هذه الدورة. والطريقة كالتالي: 


قم بإنشاء مجلد خاص على سطح المكتب وسميه بأي اسم وليكن (myweb)‏ . نقوم بفتح المجلد الذي أنشأناه ثم نضغط بالزر الأيمن للفأرة ثم نختار 
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(جديد) ثم (مستند نص). 


| J Felder 
Shortcut 


0 
LJ 
(3j) Microsoft Access قاعدة بيانات‎ 
View ^ - 
1 


; Flash ActionScript File 
Sort by Contact 
Group by * | Œ) Microsoft Word Document 
Refresh Æ Journal Document 
Customize this folder... [E] عرض تقديعي من‎ Microsoft PowerPoint 
m (Ei) aas Microsoft Publisher 
Paste shortcut q كا تدا‎ 
Undo Rename مجاه‎ |— Jet Document 
E) ورقة عمل‎ Microsoft Excel 
Share with * | E| WinZip File 
E isil مزامنة العجلدات‎ * | 80 WinZip Zipx File 
New 1 | Ë Briefcase 


Properties 


نضع اسم معين للمستند مثلا : (myfirstweb)‏ أو أي اسم. نقوم بفتح المستند ونكتب التالي: 


il: i i .te io.net 


«html» 
«body» 


<h1>My First Heading«/h1» 
<p>My first paragraph.«/p» 


</body> 
</html> 


بعد الانتهاء من كتابة الأسطر السابق نصل إلى الخطوة الأهم وهي القيام بحفظ الملف ولكن طريقة الحفظ هنا مختلفة نوعا ما عن أي حفظ لأي ملف 
نضغط على (ملف) ثم ( حفظ باسم ). ستظهر الصورة التالية: 


Organize > New folder Eo e 


^ 


* rue i Name Date modified Type 
BE Desktop L my. first web.txt. Ye\T//IAp YT Tet Doc 
n Downloads 
ij Recent Places || 


SkyDrive‏ كه 


Libraries 3l 
gj Documents 
d Music 
|i] Pictures 
EE Videos 


> c m ٠ 


Filename: my first web.txt - 


Text Documents (txt) 


> Hide Folders 


أسفل اسم الملف الذي أنشأناه مكتوب بالإنجليزية حفظ نوع الملف ك نضغط عليها ثم نختار (جميع الملفات) هنا الصورة باللغة الإنجليزية يمكنك تتبع 
الصورة والترجمة .ثم ننتقل إلى اسم الملف بدل ان كان الاسم ينتهي ب txt‏ نقوم باستبداله ب htm]‏ وسيصبح اسم الملف كالتالي: 


Myfirstweb.html 


بعد الحفظ سترى أن شكل الملف قد تغير وأصبح شكله كما في الصورة أو حسب المتصفح الذي تستخدمه: 


meake - Include in library > Share with wv Burn New folder gz- EL e 
Fr Favorites 1e my first web.html [> my first web.tt 
Chrome HTML Document | Tet Document 
BE Desktop 93 byte | 93bytes 
"n Downloads 
SIE] Daas DI¬ 


هنا تستطيع ان تبارك لنفسك لأنك أنشأت أول موقع وصفحة على الإنترنت قم بالضغط مرتين على الصفحة التي أنشأتها وسيقوم المتصفح بفتحها 
كصفحة إنترنت. كما في الشكل التالي: 


My First Heading 


My first paragraph. 
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يمكنك تغيير النص الظاهر على صفحة الويب من خلال الملف الذي أنشأته وتضع اسمك أو أي نص آخر بدلا عن 


. جرب ذلك واحفظ الملف بعد التعديل‎ .My first paragraph s My First Heading 


HTML Tags علامات ترميز‎ 


بعد أن رأينا المثال السابق نأتي الآن لشرح ما تم عمله مسبقا : 


لغة HTML-‏ تعمل بواسطة علامات ترميز وتسمى ايضا ) (HTML tags‏ وتحوي هذه العلامات اوامر ال html‏ سواء امر لكتابة نص معين امر 
لإظهار صورة أمر لتعين حجم خط معين .. الخ. 


هناك نوعين من الترميزات لصفحة الويب HTML‏ (ترميزات الهيكل — ترميزات المحتويات ).ترميزات الهيكل لابد أن تكون موجودة في أي صفحة 
ويب وإلا الصفحة لن تعمل لأنها تخبر المتصفح بأن الملف هو صفحة ويب . «html» «/html» ) Ja‏ وأيضا «body» </body>‏ ). 


ترميزات المحتويات : وهذه الترميزات تعطي اوامر للسرفر أو المتصفح بعمل شيء معين إما نص او صورة او أي شيء آخر حسب برمجة المبرمج. 


صورة توضح هيكل صفحة الويب : 


«html» 


<body> 


<h1>This a heading</h1> 


<p>This is a paragraph.</p> 


<p>This is another paragraph.</p> 


</body> 


</html> 


الشكل الرئيسي لهذه العلامات أو ال tags‏ كالتالي: -١‏ بداية الامر LY‏ نهاية الأمر وفي وسط علامة او أمر الترميز يكون المحتوى الذي سيتم تطبيق 
الأمر عليه. 


</ tagname> >المحتوى‎ tagname> 

في الصورة السابقة هو شكل اوامر ال html‏ ونعني ب tagname‏ أي اسم الأمر أو الترميز المطلوب تنفيذه. 

(start tag) هنا يبدأ الامر أو وظيفة علامة الترميز التي نريدها ويسمى‎ <tagname> 

المحتوى الفراغ الموجود في وسط المثال السابق هو المحتوى الذي سنطبق عليه امر الترميز سواء كان نصا أو صورة أو غيره. 


</tagname>‏ هنا ينتهي أمر الترميز ويسمى ب (end tag)‏ ويشبه الأول لكن هنا أضفنا علامة سلاش / والتي تميز علامة الترميز في البداية عن 
النهاية. 


في المثال السابق استخدمنا علامة ترميز <html>‏ بدأنا في بداية الملف الذي انشأناه وكتبنا هذا الرمز ويشترط لأي ملف او صفحة ويب في لغة 
HTML‏ يبدأ بهذا الرمز وينتهي ب </html>‏ 
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ايضا رأينا رمز <body>‏ وهذا رمز يشير إلى أحد أهم عناصر صفحة الويب ضمن هيكل ملف ال HTML‏ ويحتوي بداخله جميع محتويات الموقع او 


5 


الصفحة : 


meme UU] 


File Edit Format View Help 


ننتقل إلى ترميزات المحتوى للصفحة نأخذ أمثلة على ترميزات ال HTML‏ مثلا هذه الترميزات كلا منها يدل على امر معين : 
«p»‏ هنا النص </p>‏ 


حرف P-‏ الموجود داخل الترميز إختصار ل Paragraph‏ والتي تعني نص إذاً عندما نريد عمل نص داخل صفحة ويب نستخدم الترميز السابق يبدأ 


ب «p»‏ وينتهي ب </p>‏ 

مثلا من اليسار : <7/> هذا كتاب خاص بالمواقع الالكترونية «p»‏ 

<img> «/img» مثال آخر:‎ 

ترمز كلمة img‏ إلى image‏ وتعني صورة لذلك يستخدم هذا الترميز لعمل الصورة داخل صفحة الويب. 
سنأتي إلى عناصر ترميز كثيرة في ال HTML‏ في الدروس الأتية . 


ملاحظة هامة: لا فرق في كتابة علامات ترميز لغة ال HTML‏ سواء بالحروف الإنجليزية الصغير او الكبيرة كلاهما لا فرق بينهما . 
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محرر ال (HTML editors) HTML‏ 
نقصد بالمحرر هنا أي البرنامج الذي سوف نستخدمه لإنشاء صفحات الويب ولكتابة وبرمجة لغة ال HTML‏ والذي يساعدنا في برمجة صفحاتنا التي 
سنقوم بعملها وبرمجتها. 


في بداية تعلمنا لغة ال HTML‏ سنستخدم برنامج المفكرة أو ما تسمى ) Notepad‏ ) باللغة الانجليزية والموجودة في أي جهاز حاسوب ويمكن 
الوصول إليها عن طريق: 


A XPS Viewer 


إبدا — البرامج — البرامج الملحقة — المفكرة 55 5 
E Calculator‏ 


E Command Prompt Documents 
89 Connect to a Network Projector 


E| Connect to a Projector 

E] Getting Started 

Á Math Input Panel 

T Nepas 1 

@Î Paint - 4 5 * 5 " * he -* - * x 0 

يمكننا من خلا المفكرة برمجة وإنشاء الملفات التى نريدها ويمكن الوصول Sall‏ 8 كما في الصورة ID oii Gas TEE‏ 

13 Run 0 ١1 

t € Control Panel وا لشرح السابق‎ 
ound Recorder C 

® Sticky Notes 

@ Sync Center 

G Windows Explorer Default Programs 

Fil Windows Mobility Center 

E WordPad Help and Support 


Devices and Printers 


J Ease of Access 

ıJ System Tools 

J Tablet PC 

ıJ Windows PowerShell 


Back 
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عناوين ال (HTML Headings) HTML‏ 
سنتعلم في هذا الدرس كيفية إنشاء عناوين في صفحة الويب وهي انواع منها ما هو أكبر حجما ومنها ما هو أصغر بقليل ومنها ما هو أصغر أيضا. 


علامة ترميز العناوين في ال html]‏ — بسيطة la»‏ ولها رمز محدد وهو «/hI»‏ <11> وحرف ال h‏ يرمز لكلمة heading‏ والتي تعني عنوان .اما 
الرقم ١‏ فيمكن تغييره إلى رقم T‏ وهو حجم الخط, 


مثال: 


HTML الكود أو البرمجة التالية في ملف‎ casi 


T : REB X 
سس‎ otepa Me ھت‎ 


File Edit Format View Help 


«html» 
«body» 


«hi»welcome«c/h1» 
«h2»welcome«/h2» 


«h3»welcome«/h3» 


بعد كتابة الكود والبرمجة السابقة ستظهر النتيجة التالية: 


Welcome 


Welcome 


Welcome 


Bay‏ النتيجة في الكود السابق وضعنا ثلاثة عناوين وجعلنا أرقامها مختلفة كما تلاحظ النتيجة النص الأكبر هو عنوان رقم واحد. والأصغر هو رقم ثلاثة. 


(HTML Paragraphs) HTML فقرات ال‎ 


فقرات لغة ال HTML‏ . كيف نقوم بعمل فقرات أو نص داخل صفحة الويب ؟ هنا في لغة ال HTML‏ طريقة سهلة وكلما مررت على الدروس التالية 
ستجدها مكررة في طريقة عمل الترميزات والبرمجة مع تغيير فقط مسميات الترميزات . 


نقوم بإنشاء فقرات أو نصوص من خلال الوسم أو الترميز أو الكود <P> </P>‏ ويرمز حرف ال P‏ إلى Paragraph‏ والتي تعني نص او فقرة 
.في المثال التالي سنقوم بعمل فقرة معينة داخل صفحة الويب وعنوان أيضا كما أخذناه في الدرس السابق وسنطبقهما معا ء قم بكتابة الكود التالي: 
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Î] my. first web.html - Notepad 
File Edit Format View Help 
«html» 
«body» 


«hi» welcome to HTML course «/hi» 
«p» 
welcome to HTML course ,and our laps 


</p> 


</body> 
by سد‎ 4 


بعد كتابة وبرمجة الكود السابق وكتابة العبارات السابقة سترى النتيجة كتالي : 


welcome to HTML course 


welcome to HTML course ,and our laps 


يمكن عمل عدة نصوص في آن واحد أيضا لتكون فقرات منفصلة عن بعضها وليس كتلة واحدة وذلك بتكرار ترميز الكود الخاص 
بالنصوص أو الفقرات. 


(HTML Links) HTML ال‎ fo) 
وعند الضغط‎ . ( UA لا يوجد صفحة على الإنترنت إلا وتجد كلمة أو زر عن الضغط عليه تنتقل بالضغط عليه إلى صفحة آخرى أو تجد جملة ك( اضغط‎ 
. LINKS عليها تتوجه إلى مكان آخر أو صفحة أخرى هذه كلها تسمى روابط او‎ 


في هذا الدرس سنقوم بعمل رابط أو لينك يوجهنا إلى أي موقع آخر ونستخدم الترميز <4/> <4> لمعمل الرابط لنقم بكتابة الكود التالي وسنجرب 


في هذا المثال الكتابة باللغة العربية تابع: 


8 Note 
File Edit Format View Help 


«a href-"http://www.google.com"» للذهاب إلى جوجل‎ la إضغط‎ </a> 


«/body» 
py ae fd 


Bay‏ الترميز والكود في الصورة قمنا بعمل رابط إلى موقع جوجل قمنا بكتابة <4> وهي ترميز الرابط لكن قبل إغلاق الرابط لدينا جملة مهمه وهي 


href=""‏ هذه الجملة تحدد مكان الذهاب بعد الضغط على الرابط وهي ثابته لا تتغير ونضع ما بين علامتي التنصيص رابط أي موقع كما وضعنا موقع 
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جوجل في المثال يمكنك عمل أي موقع آخر .أو حتى يمكنك عمل ربط لصفحة أخرى داخل الموقع نفسه سناتي لها لاحقا . قم بتجربة الملف وتشغيله 
وانظر الى النتيجة واضغط على الجملة طبعا ستظهر كما في الشكل التالي : (انظر الملاحظة اسفل قبل تشغيل الملف) 
ملاحظة : في الغالب لا تعمل اللغة العربية بشكل صحيح لذلك لابد من عمل الخطوة التالية كيف يقوم السرفر باعتماد اللغة العربية من خلال : 
اضغط على ملف — Bia‏ باسم - اسف النوع هنا خيارات اختار 11668 بدلا عن ANSI‏ كما في الصورة التالية : 
T Save As‏ 


| » خاص بالأمتلة‎ » myweb ~ | <, || Search myweb p| 


Organize œ New folder EER © 


F Favorites ^ Name 2 Date modified Type 

| EE Desktop [E] my. first web. YATA p ‘FEIT Tet Doc 
Î Downloads 

E] Recent Places |E 


û SkyDrive 


(Sj Libraries 
E] Documents 
2 Music 
(Ej Pictures 
Bl videos 


-af m r 


File name: my first web.html m 


Save as type: [Tet Documents (be) z) 


ANSI 


Unicode 
Unicode big endian 


ثم قم بالحفظ واذا ظهرت رسالة اضغط نعم . 


بعد ان عدلنا نظام التعرف على اللغة العربية نقوم بتشغيل الملف الذي قمنا بالعمل عليه سنجده ظهر بالشكل التالي: 


= 3 @ [file///C/Users/yousef/Desktop/átis3U2096 Ls /88l sall2096 55552096. ,US/myweb/my. first, web.html 


إضغط هنا للذهاب إلى جوجل 


نلاحظ عند الضغط على الزر يفتح لنا في نفس الصفحة موقع daga‏ لو أردنا ان يقوم المتصفح بفتح الموقع في صفحة أخرى هل هناك طريقة لعمل 
ذلك ؟ 
نعم .هناك خاصية نقوم بإضافتها إلى تاق أو كود أو ترميز اللينك وهي خاصية (target)‏ ومعناها هدف . نقوم بإضافة الخاصية السابقة مثل خاصية 


الرابط ومعها علامتي تنصيص كما في المثال التالي : 


Î] my first web.html - E 
File Edit Format View Help 

«html» 

«body» 


«a href-"http://www.google.com" target-" blank"» إضغط هنا‎ «/a» 


kj rene id 
</html> 
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لاحظ أضفنا خاصية " target-"‏ وضعنا ما بين علامتي التنصيص القيمة blank‏ . والتي تعني فتح صفحة فارغة. جرب المثال بنفسك واضغط 
على الرابط وانظر هل فتحت لك صفحة أخرى أم لا . كيف أقوم بعمل ربط لصفحة داخل موقعي نفسه او داخل مجلد موقعي ؟ مثلا أريد أن اضع زر أو 
رابط اسمه اتصل بنا فهل يمكننا ذلك ؟ نعم تستطيع عمل ذلك فقط قم بعمل التالي : 


انشئ صفحة ويب سمها بالاسم contact‏ . ضع فقرة أو نص معين حول الاتصال بك عنوانك وبريدك الالكتروني .ضعها بجانب الصفحة التي تطبق 
عليها. 


بعد عمل صفحة أخرى لجانب الصفحة التي نقوم بالتطبيق عليها نعود إلى صفحة التطبيق لنضيف رابط لفتح الصفحة الأخرى. نقوم بعمل الرابط 
كالتالي: 


File Edit Format View Help 
«html» 
«body» 


«a href-"contactus.html"» إضغط هنا‎ </a> 


Sony 
«/html» 


بعد عمل الرابط كما في الصورة قم بفتح الصفحة واضغط على الرابط على تم نقلك للصفحة الأخرى ؟ نعم سيتم نقلك للصفحة الأخرى التي أنشأتها. 


التعامل مع الصور ال (HTML Images) HTML‏ 


المواقع الإلكترونية بدون صور لا تكون جميلة وجذابة بل إن أكثر المواقع جمال تتميز بوجود الصور والخلفيات الرائعة » هنا سنتعلم كيفية إضافة 
صورة لصفحة الويب . 


لإضافة صورة في لغة ال HTML‏ نستخدم ترميز معين وهو <img>‏ كما في المثال التالي لدينا صورة اسمها pulpit‏ سنقوم بإضافتها إلى صفحتنا 
التي نطبق فيها .قم بإدراج أي صورة في المجلد الذي تعمل 
Î] my. first web.html -‏ 


عليه وقم بتسمية الصورة pulpits‏ ثم قم بكتابة الكود File Edit Format View Help‏ 
<html> 5 1‏ 
التالي: «body»‏ 


«img src-"pulpit.jpg" alt-"Nice Image" < 


«/body» 
cal. 


لاحظ الكود المكتوب : 


«img»‏ وهذا ترميز خاص بالصور لاحظ أنه لا يوجد 
ترميز يقوم بإغلاق الكود كما US‏ نعمل مسبقا. 


Sre=" "‏ هذه الخاصية تقوم بإخبار المتصفح او السرفر عن مكان الصورة واسمها ونقوم بكتابة اسم الصورة ما بين علامتي التنصيص شاهد المثال 


pulpit.jpg اسم الصورة‎ Bay, 


اضفنا نوع الصورة وهو .jpg‏ وهي مهمه جدا كون الصور أنواع فمنها gif‏ ومنها .png‏ وانواع أخرى ومن عملوا على برامج معالجة الصور 
يعرفون ذلك . 
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alt=" "‏ هذه الخاصية تقوم بوصف الصورة في حالة لم تظهر الصورة لأي مشكلة ما يظهر الوصف المكتوب ما بين علامتي التنصيص . 
قم بتجربة المثال السابق . هل تريد إضافة نص إلى الصورة او شرح مبسط ؟ 
استعن بما أخذناه مسبقا من علامات الترميز لتضيف وصف للصورة وليكن بعد الصورة انظر المثال التالي وسنتعلم منه خصائص جديدة : 


| my.first web.html - gog 
File Edit Format View Help 

<html> 

<body> 


= 


cmg src-"pulpit.jpg" alt-"Nice Image" width="400" height="200" > 
<br> 
«p» في هولندا‎ gb جبال‎ sas هذه صورة رأئعة‎ .. </p> 


</body> 
pian fA 


خصائص جديدة أضفناها لنتعرف عليها معا : 
Width" "‏ هذه خاصية مقاس العرض للصورة ونضع الرقم الذي نريده وسط علامتي التنصيص. 
Height=" "'‏ هذه خاصية مقاس الطول للصورة ونضع الرقم الذي نريده وسط علامتي التنصيص. 


ايضا هنا ترميز جديد أعتقد أنه هو ما كنت تبحث Aie‏ وستحتاجه وهو «Dr»‏ وهو jai‏ يستخدم للنزول سطر واحد بعد اي ترميز لاحظ ماذا كانت 
النتيجة : 


.. هذه صورة رائعة وهي جبال تقع في هولندا 
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£ 

(HTML head) HTML JI راس‎ 

يعتبر رأس الصفحة المبرمجة من أهم الأجزاء للموقع ففيها يتم وضع عنوان الصفحة أو اسم الموقع أو تفاصيل الصفحة التي زرتها قد يكون خبر أو 
البوم صور أو غيرها. وأيضا يحوي وصف للموقع والصفحة التي تمت زيارتها. 

أيضا في رأس صفحة ال htm]‏ يمكن وضع أشياء أخرى هامة سنتعلمها في الدروس القادمة مثل : 

خصائص الاستايل الخاصة بالموقع (CSS style)‏ أو رابط لملف CSS‏ أو JAVA SCRIPT‏ سنتعلم كل ذلك لاحقا سنجرب الان بعض محتوى رأي 


الصفحة لاحظ الكود التالي : 


| my_first_web.php - Notepad 00 Fc" 


File Edit Format View Help 


«html» 
«head» 


«title» ial هنا عنوان الموقع او‎ </title> 


«meta name-"description" content-"aall وصف الموقع أو‎ Ua" 


</head> 


<body> 


Bay‏ في المثال السابق وضعنا كود الرأس <head>‏ وأغلقناه في الاسفل </head>‏ هذا رأس الموقع. ننتقل لمحتواه وضعنا عنوان للموقع والذي 
ويرمز له بالكود أو الوسم «title»‏ وأغلقناه بال </title>‏ ووضعنا في داخله عنوان معين سواء كان اسم gigal‏ أو عنوان الصفحة المراد تصفحها . 


ايضا أضفنا كود ال «meta»‏ وهذا الكود من اهم مكونات المواقع فهي مهمة للمتصفح ومحركات البحث مثل جوجل وغيره وعلى حسب نوعها هنا في 
المثال تم وضع ال meta‏ لوصف محتوى الموقع وهو مهم لمحركات البحث تحتفظ او أرشفة الوصف لديها لحين البحث عن نفس الكلمات المدرجة في 
الوصف للموقع. جرب وشغل الصفحة كالمثال السابق ماذا تلاحظ في علامة تبويب المتصفح ؟ هل ظهر العنوان ام لا ؟ 
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(TEXT formatting) HTML Ji نص‎ (31453 

هناك اكواد خاصة لتنسيق النصوص داخل صفحات الويب مثل تفخيم النص او النص المائل أو النص العادي. ومن خلال المثال التالي سيتبين لك بعض 
خصائص تنسيق النصوص. 

وسم او كود «b»‏ وهو اختصار لكلمة bold‏ أي تفخيم النص . 

وسم أو كود <i>‏ وهو اختصار لكلمة italic‏ أي نص مائل. 

مثال: 


| my. first web.html - Notepad LEN 
File Edit Format View Help 


</head> 

<body> 

> />موقع رواد التكتولوجيا<‎ b» 
>7 />موقع رواد التكتولوجيا<‎ 1< 


</body> 
/htwi- 
«I 


في الكود السابق أضفنا كود «p»‏ وكتبنا نص معين وثم أغلقنا الكود في حالة لم يتم إعلاق الكود ستكون كل نصوص الصفحة مفخمة. كما قمنا بإضافة 
كود او وسم <1> كما في الكود السابق وهي للنص المائل . قم بكتابة الكود السابق وستلاحظ النتيجة التالية كما الصورة : 


Arran 


€ C | file///C//Users/yousef/Desktop/álie3,2096, 
موقع رواد التكنولوجيا موقع رواد التكنولرجيا‎ 


لاحظ النص العريض والنص المائل يمكنك وضع كل جملة في سطر ضع كود السطر كما تعلمناه مسبقا. تمارين حول خصائص النص قم بتطبيق الأكواد 
التالية في الجدول التالي ولاحظ ماهي وظيفة كل كود او وسم : 
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HTML Text Formatting Tags 


Tag Description 

<b> Defines bold text 

<em> Defines emphasized text 

xi» Defines a part of text in an alternate voice or mood 
«small Defines smaller text 

<strong> Defines important text 

xsubz Defines subscripted text 
«supz Defines superscripted text 
<ins> Defines inserted text 

<del> Defines deleted text 

<mark> Defines marked/highlighted text 


خصائص الخطوط فى ال (HTML font) HTML‏ 

توسعت طرق تنسيق الخطوط لكن هي نفسها الأكواد مع اختلاف بسيط أحيانا حتى في نفس الخاصية هنا سنضيف خط إلى صفحتنا التي نطبق عليها 
ونضع خط مميز عن الخطوط التي أنشأناها مسبقا. وسنستخدم هنا الكود أو الوسم «font» «/font»‏ 

لاحظ المثال التالي: 


«html» 
«head» 


«title» isl ها عنوان الموقع او‎ </title> 


«meta name-"description" content=" وصف الموقع أو الصفحة‎ La" - 


«font face-"Times New Roman" align="right" color="red" align="center" size-"12" dir-z"rt]l"»lejsxu 35,«/font» 


</body> 
eie م‎ 


بعد ملاحظتك للكود السابق والجديد سترى كود كبير لكنه بسيط جدا وسنسرد هنا كل شي في الكود الجديد وسنبدأ من البداية: 
أضفنا كود Ua s «font»‏ إشارة للمتصفح او السرفر بأن لدينا هنا خط له خصائص. 


بعد أن أضفنا كود الخط نقوم بإضافة الخصائص للخط وبدأنا بعمل خاصية ال face‏ وتعني نوع الخط ووضعنا ما بين الحاصرتين اسم الخط الذي نريده 
وهو الخط الشهير all s Times New Roman‏ 252 طبعا في برنامج الورد والاكسل وغيره. 


MOBILE: 00967 714490030 ل‎ ho anel 
MOBILE 2: 00967 772755202 Email: info@techpio.net ١ pe 


ملاحظة : (ليس كل الخطوط موجودة في السرفر لذلك يستخدم بعض الخطوط الموجودة في المتصفحات او السرفرات المعروفة او إضافة خط مميز 
للموقع). 


أضفنا خاصية color‏ وتعني اللون ووضعنا ما بين الحاصرتين اسم اللون وهو red‏ ويعني أحمر يمكنك عمل لون باسمه غير الاحمر مثل green‏ 
جرب ذلك كما انه يوجد اكواد خاصة بالألوان بدلا عن الأسماء مثل #0028 ضع هذا الرمز بدلا من الاسم ولاحظ.(سنتعلمها لاحقا). 


أضفنا خاصية align.‏ وتعني مكان الخط هل على اليمين او اليسار او الوسط هنا اخترنا center‏ وتعني توسيط الخط جرب كلمة left‏ وكلمة right‏ 
أضفنا خاصية dir‏ وتعني direction‏ وهو اتجاه النص وهنا خاصية مهمه جدا سترافقك كثيرا في عالم المواقع وكما تعلم أن اللغة العربية اتجاهها من 
اليمين إلى ايسار في المثال طبقنا هذه الخاصية وهي rtl‏ وتعني right to left‏ من اليمين إلى اليسار وهناك الخاصية الأخرى الخاصة باللغة الإنجليزية 
Itr‏ أي من اليسار لليمين عكس الأولى. 


أغلقنا بادئة الكود التابعة للخط ثم وضعنا النص وأغلقنا النهاية للخط ب <٤«هf/>.جرب‏ المثال السابق ولاحظ النتيجة: 


رواد التكنولوجيا 
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الجداول oå‏ ال (HTML Tables) HTML‏ 
تعتبر الجداول من اهم محتويات لغة ال HTML‏ وتستخدم بكثرة في المواقع والنشرات الالكترونية رغم وجود بديل جديد لكن مازال من يستخدمها 
إلى الان. ويرمز له بالكود «table»‏ 


الجدول او ال HTML Table‏ وظيفته الرائعة التي يقوم بها هي ترتيب محتوى الموقع سواء العناوين والنصوص والصور وغيرها ترتيب دقيق جدا 
»ويتكون الجدول من التالي: ( أعمده — صفوف — كلايا ). 


والهيكل العام للجدول كالتالي: 


الصف الاول الخلية رقم 2]|الصف الأول الخليه رقم 1 


z - 31^ * z LT CL i15 P Ri 
1 التاني الخلية ر 2|| الصف التاني خليه رقم‎ Ciall 


والكود المستخدم كالتالي: 


o‏ »سل 


File Edit Format View Help 


«table border-"1"— 
<tr> 
<td>) <ل)/>الصف الأول الخليه رقم‎ «td» Y <0)/>الصف الاول الخلية رقم‎ 


<0/>الصف الثاني الخلية رقم «td‏ <0)/>الصف الثاني خليه رقم <td>)‏ 


</tr> 
</table> 


شرح الكود: في البداية قمنا بعمل جدول بإضافة كود «table»‏ لاحظ وضعنا خاصية للجدول وهي إظهار حواف الجدول border‏ بمقدار ١‏ بكسل جرب 
وضعها صفر لاحقا وقارن. تم إضافة صف <tr>‏ ثم تم إضافة خليه داخل الصف بالكود «td»‏ هنا يحق لنا وضع المحتوى الذي نريد ثم نغلق الخلية 
يمكننا عمل خلايا كثيرة كالسابق ثم في الاخير نغلق الصف الاول بالكود </tr>‏ الصف الثاني بنفس طريقة الاول في الاخير نقوم بإغلاق الجدول 
</table>‏ بعد الاستكفاء بالصفوف. لاحظ الخلايا التي الصف الأول حين تنطبق مع الخلايا مع الصف الثاني نصفها بالعمود. 
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(HTML Lists) HTML القوائم في ال‎ 


معناها بالعربية قائمة او لائحة وتستخدم لعدة اشياء والاهم للعناصر المسرودة ضمن فئات مثلا: خضروات (جزر- خس — طماطم ( 
فواكه ( تفاح - برتقال — عنب ).يمكن التعبير عنها من خلال القوائم في الامط بواسطة القوائم (lists)‏ 
لدينا نوعين من القوائم وهي: 


النوع الأول : القائمة الغير مرتبة ( Unordered List‏ ) وتكتب في لغة html-!‏ بهذه 


الطريقة كما في الصورة المقابلة : aerem —— x‏ 


| 


File Edit سب‎ View Help 

2 وهي ترمز للقائمة الغير مرتبة او غير مرقمة فتحناها بعد اسم أا“‎ <ul> استخدمنا كود‎ Bay 
ul> 

خضروات ونكتب بعدها كود العناصر وكل عنصر يفتح ويغلق بالكود الخاص به وهو iM‏ 

Xli» -À«/[li- 

«li edet] 


<i>‏ مثل عنصر «li»‏ </نا>. 
</ul>‏ 


جرب عمل كود القوائم وانظر الى نتيجته في موقعك. 


النوع الثاني : القائمة المرتبة ( ordered List‏ ) وتكتب في لغة html‏ بنفس طريقة القائمة الغير مرتبه مع اختلاف بسيط في الكود.كما في 
الصورة المقابلة أيضا: 


ما الفرق بين الكود الاول والثاني للقوائم ؟ جرب الكودين وانظر ايهما المرتب والغير 
File Edit Format View Help‏ 
مرتب. ^ خضروات 
<ol>‏ 
<i></i>‏ 
سنستخدم القوائم فيما بعد في لغة ال htm]‏ مع ال CSS‏ باحترافية وصنع قائمة رئيسية E‏ 


للمواقع بشكل أنيق واكثر فائدة. 1 sor‏ 
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34.153( عام حول ال HTML‏ 


( General application for html language ) 


سنقوم بتطبيق تطبيق عام حول ما أخذناه في لغة HTML-I‏ ومن خلال هذه التطبيق سننشأ موقع مصغر بواسطة هذه اللغة الرائعة ونضيف بعض 
الأوامر البسيطة والمفيدة وسيكون التطبيق كما في الشكل التالي: 


صورة لرأس الموقع العرض )« *^( والطول ٠٠١(‏ بكسل) 


الرئيسية أعمالنا من نحن صور Udal‏ 
صورة )٠٠٠*۲٠٠۰(‏ نص عادي 
صورة )٠٠٠*۲٠٠١(‏ نص عادي 
صورة (VAEV. e)‏ نص عادي 
صورة (VAEV. e)‏ نص عادي 


حقوق الموقع 
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gaal الك‎ cal Í + 


بالنظر للشكل السابق والمطلوب سنقوم بعمل جدول يحوي gi gall‏ كاملا ويضبط لنا محتوياته » ويحتوي الجدول على ۷ صفوف الصف الأول لديه خليه 
واحدة فقط والصف الثاني كذلك كما تلاحظون في الشكل وآخر صف كذلك. 


الصفوف الباقية مكونة من خليتين او عودين الاول على الايمن للصور والثاني على الأيسر للنص. في الصف الاول في الخلية الوحيدة سنصمم صورة 
ونضعها في الخلية في رأس الجدول بنفس المقاسات المطلوبة وننوه على أن شكل الموقع العام يعتمد على فن التصميم وجماله وليس حرفية الأكواد 
والبرمجة فقط, 


في الصف الثاني من الجدول نقوم بعمل عناصر القائمة كروابط عند الضغط عليها يتم الذهاب لصفحة أخرى وهي (الرئيسية — أعمالنا — حول الموقع .. 
إلخ ).طبعا الصفحات حاليا غير موجودة ولكن بعد الانتهاء من الصفحة الرئيسية إلى آخرها نقوم بتسمية الصفحات الأخرى في الروابط مثلا: عنصر 
القائمة أعمالنا سنضع iaia‏ اسمها our. works.htm]‏ في رابط الزر أعمالنا. 


بعد الانتهاء من تسمية الروابط والصفحات الأخرى نواصل إدخال المحتويات ففي الصف الثالث في الخلية اليمنى نضع صورة حسب المقاس المطلوب 
وهو إما أن الصورة نفسها تكون بنفس المقاس او نضع صورة بأي مقاس ونضبط مقاسها في الكود الخاص بالصورة وانا افضل الأول حتى لا تثقل 
الصفحة بأحجام الصور. 

في الخلية اليسرى نقوم بعمل نص ونضع الاعدادات الخاصة بالنص حسب رؤيتنا. نطبق الخطوتين السابقتين على بقية الصفوف. الخطوة الأخيرة 
الصف الأخير نضع فيه نص عادي بالحقوق والملكية للموقع ايضا رابط للشخص او الشركة المصممة للموقع. 
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نبدأ بالتطبيق وعمل الكود اللازم: 


نقوم بفتح برنامج الفوتوشوب بداية كما في الصورة ونعمل ملف جديد بالمقاسات العرض )+ (Ae‏ والطول ٠٠١(‏ بكسل) كما في الصورة التالية: 


Untitled-1 © 10096 (RGB/8) * x 


Name: 


Preset: Clipboard 


Width: 
Height: 
Resolution: 
Color Mode: 


Background Contents: 


2) Advanced 


Color Profile: 


Pixel Aspect Ratio: 


headwebsiteļ 


Pixels 
Pixels 
Pixe/Inch 
RGB Color ~ 8bit 


White 


Working RGB: sRGB IEC61966-2.1 


Square Pixels 


Cancel 


[Save Preset... 


نقوم بعمل اللازم في الصورة التي ستكون رأسية الموقع وهنا ملاحظات او تنبيهات عندما قمنا بعمل هذه الصورة كرأس للموقع ماهي الا فكرة من أفكار 
كثيرة فمثلا هناك مصممين للموقع يفضلون عمل خلفية لرأس الموقع صورة واحدة والشعار مع الاسم صورة الأخرى وهو الأفضل ايضا . 


بالإمكان عمل الخلفية لون معين في الصف للجدول الخاص بالموقع افضل من الصورة ليخفف حجم الموقع. أيضا لا يشترط بأن يصمم الصورة لرأس 
الموقع مصمم الموقع نفسه أو المبرمج يفضل أن يصممها شخص له حس فني وتصميم مميز .فإن توفرت هذه الصفة في مبرمج الموقع سيكون أفضل 


وأوفر للوقت. 


بعد فتح برنامج الفوتوشوب سأقوم بعمل ترويسة للموقع بسيطة كمثال للتطبيق والناتج كما في الصورة التالية: 
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File Edit Image layer Type Select Filter 3 ew Window Help 
Auto-Select "Group Show Transform Controls 


HEADER.psd © 100% (MEDIA, RGB/8) > 


Swatches 


ا لملللللا 


NC 


دورة تصميم المواقع 
WEJ S‏ 


TES 


" WEBSITES DESIGN COURSES 
دورة تصميم المواقع‎ 
T ayi 
Background 


è /‏ 
2 5 5 هم صم : وي كر 


نقوم بإنشاء alia‏ خاص بالتطبيق الخاص بال HTML‏ ونسميه HTML‏ ثم نقوم بعمل مجلد آخر ليحوي الصور التي سنستخدمها للتطبيق نسمي 
المجلد باي اسم مثلا imgs‏ كما في الصورة: 


m ٠ خاص بالأمئلة + كناب ودورة المواقع‎ » HTML » E 


Drganize v Include in library v Share with > Slide show Burn New folder 


Fr Favorites d 

BE Desktop 

Downloads‏ إل 

£ Recent Places 

l SkyDrive 59 
U Libraries 

Apps‏ نك 

[3] Documents 


d Music 


[El Pictures 
EB nal. 


قمنا إلى الان بعمل الصورة الخاصة برأس الموقع نقوم الآن بإنشاء صفحة الموقع والتي سنسميها index.html‏ ونبدأ بعمل الكود كالتالي: 


الجزء الأول من الكود: 


1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmlil-transitional.dtd"» 
2 <html xmins-"http://www.w3.0rg/1999/xhtml"» 

3 <head> 

4 «meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /> 

EE «title»i.05, 435 7d! موقع دورة المواقع‎ | E-MEDIA </title> 

LEM </head> 

8 <body bgcolor-"£FFFFB7"» 

9 «table width-"800" align-"center" border-"1" bordercolor-"£FF6600" dir-"rtl"» 
10 

11 <tr> 

12 «td» 

"KNEE <img src-"imgs/header.jpg" /» 

EX </td> 

15 </tr> 

16 

17 — <tr><td> 


E <b> «a href-""»«font color-"£FF9900"»i.4. 5,3! «/font»«/a» </b> 
19 &nbsp; &nbsp; &nbsp:;&nbsp:; 


<b> «a href-""»«font color="$FF9900">LiJLasİ <font color-"£FF9900"»«/font»«/a» </b> 
&nbsp; &nbsp; &nbsp;&nbsp; 


<b> <a href-""»«font color-"£FF9900"»543 jğja</font></a> </b> 
&nbsp; &nbsp; &nbsp;&nbsp; 


<b> «a href=""><font color="#FF9900">}pə</font></a> </b> 
&nbsp; &nbsp; &nbsp:;&nbsp:; 
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e 


J 
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الجزء الثاني من الكود: 


<b> «a href-""»«font color="#FF9900">iawjail Jş></font></a> </b> 
&nbsp; &nbsp; &nbsp;&nbsp: 


<b> «a href-""»«font color-"£FF9900"»Li5 ,Lo3!X/font»«/a» </b> 


«/vr»«/td» 
«tr» 


«vd» 


«table» 

<tr> 

<td> 

«img src-"news/a7.jpg" width-"250" height-"130" /> 
«/td» 


<td> 
Qa! - جزيرة سقطرى‎ 
<br /< 
سقطرى وتكتب أيضا صقطراء أو سقطرة أو صوقطرةء هي‎ 
يمتي مكون من أريع جزر على المحيط الهتدي قبانة‎ da! 
صواحل القرن الأقريقي 350كم جتوب شيه الجزيرة‎ 
مستوى قريد‎ dis العريية[1]. إن اتعزال انجزيرة انطويل عن أقريقيا وشبه الجزيرة انعربية قد‎ 
مأنوق من الاستيطان الحيوي على الجزيرةء وكذلك قي المستوى الاجتماعي لسكان الجزيرة[2‎ 325 34] - 


«/td» 
</tr> 


<tr> 
<td> 


الجزء الثالث من الكود: 


xou 
«img src-"news/all.jpg" width-"250" height-"130" /» 
«/td» 


«td» 
isi 
<br /> 
5 
لتتائج‎ Liig بلغ عدد سكان جزيرة صقطرى‎ 
نتعداد انسكاتي لعام 1994م حوالي‎ 
(65.514) تسمة ويلع 135020 عام 5].2004[. وكاتت جزيرة‎ 
سقطت ييد اقراد من الجيهه القوميه القادمه‎ ái» 1967 المهريه إلى عام‎ iihlal] سقطرى عاصمة‎ 
من اليمن واتضمت إلى اليمن الجتويي‎ 
ثم إلى اليمن الموحدء الجيتات‎ 
من جزيرة سقطرى هي جيتات‎ Lais! التي تم‎ . . 
عوامل خارجيه والسقطريون هم من قبائل سائده اي ان الجيتات هي جيتات عريية 4233 سائده‎ glo عريية تقية نم تتأثر‎ 
ان دل على شي قأته يدل على‎ liag. ونيست قرع‎ 
اتهم حاقظوا على تسيهم العريي التقي.قبيلة‎ 
المهره وقبيلة جهيته وقبيلة الجهضمي‎ 
هم سكان سقطرى الأوائل‎ piap رأسهم قبيلة‎ pleg .وقيائل الساده وقبيلة مذحج وقبيلة كتدة وقيائل الممانك اليمتيه القديمه‎ 


</td> 
«/tr» 


«tr» 
«td» 


صورة 
</td>‏ 


<td> 


الجزء الرابع من الكود: 
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<tr><td> 
</td></tr> 
</table> 


65 5ك كات كا تت كه 
ها QN Ó‏ شر OQ‏ لت ل O‏ 


© 
ص 


[2] 


«/td» 

«/tr» 

<tr><td align-"center"»The copyrights 2013«/td»«/tr» 
</table> 

</body> 


</html> 


بعد كتابة الكود السابق سيكون الموقع بالشكل التالي: 


MEDIA 


I9oll دورة تصميم‎ 
SITES DESIGN COURSES 


WEZ 


جزيرة سقطرى - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هي أرخبيل يمتي مكون من أربع جزر على المحيط 
الهتدي قبالة سواحل القرن الأفريقي 350كم جتوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن 
أفريقيا وتبه الجزيرة العريية قد خلف مستوى فريد وغير موف من الاستيطان الحيوي على الجزيرةء وكذلك في 
المستوى الاجتماعي لكان الجزيرة[2]. 

النكان 

بلغ عدد سكان جزيرة سقطرى وفقاً لنتائج التعداد السكاني لعام 1994م حوالي )65.514( نسمة وبلغ 135020 
عام 5].2004[ وكانت جزيرة سقطرى عاصمة ial‏ المهريه إلى عام 1967 حيت سقطت بيد افراد من 
الجبهه القوميه القادمه من اليمن وانضمت إلى اليمن الجنوبي تم إلى اليمن cas gall‏ الجينات التي تم اخذها من 
جزيرة سقطرى هي جينات عربيه نقيه لم تتأتر بأي عوامل خارجيه والسقطريون هم من قبائل سائده اي ان 
الجينات هي جينات عربية نقيه سائده وليست فرع .وهذا ان دل على تي فأنه يدل على انهم حافظوا على نسبهم 
العربي التقي.قبينة المهره وقبيلة جهينه وقبيلة الجهضمي وقبائل الساده وقبيلة منحج وقبيلة كندة وقبائل الممالك 
اليمنيه القديمه وعلى رأمهم كبيلة جميّر هم سكان سقطرى الأوائل. 

لصن 


نص 


|1 Thecopyrights 2013| 


MOBILE: 00967 714490030 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


شرح كود التطبيق (HTML)‏ 


في السطر ٠-١‏ : يتم كتابتها تلقائيا عند استخدام برنامج الدريم ويفر الذي ستستخدمه فيما بعد لعمل صفحات الويب لكن هنا عليك كتابة كل سطر يدويا 
وبالطريقة التي تعلمناها. 


قيمة <DOCTYPE>‏ توضع دائما اعلى الصفحة أي في منطقة الرأس وهي تخبر المتصفح عن نوعية الاكواد المستخدمة في الصفحة سواء 
XHTML, HTML‏ أو خليط بينهما حتى يتم التعامل معها بشكل صيح وسليم لكي يظهر للمستخدم بشكل منسق وفي السطر الثاني سطر p gil‏ اللغة 
المستخدمة والداعم لها وهي شركة عإم.3س.ثم بعد ذلك فتحنا منطقة ال head‏ . 


السطر الرابع مهم للغة العربية او لغة الترميز التي يتم إعلام المتصفح بأن يعتمدها في عرض الموقع لأي شخص ويتقبل اللغة العربية. وتكتب داخل 
منطقة ال head‏ .في السطر 5-5 العنوان الخاص بالموقع داخل الكود المخصص « ثم إغلاق ال head‏ . 


1-5 في السطر الثامن قمنا بفتح محتوى الموقع او جسم الموقع <body>‏ .واضفنا داخله كود لون الخلفية وحدد كود اللون 
bgcolorz FFFFB7"‏ . في السطر التاسع قمنا بعمل جدول وبدأنا بعمله بالكود «table»‏ ثم اعطينا هذا الجدول خصائص وهي : 


width="800"‏ خاصية العرض تم تعيين عرض الموقع ٠٠١‏ بكسل 
align="center"‏ خاصية اتجاه الموقع او مكانه وحددنا المنتصف center‏ 
border="1"‏ خاصية مقدار سمك حواف الجدول وحددنا ١‏ بكسل جرب ارقام ولاحظ, 


. خاصية لون سمك الحواف وحدد لون معين‎ bordercolor="#FF6600" 


dir-"rtl"‏ خاصية بدء المحتويات من اليمين لليسار او من اليسار لليمين هنا حددنا من اليمين الى اليسار rt]‏ من السطر ١5-١١‏ هنا قمنا بعمل 
الصف الاول في الجدول والذين حددناه سابقا بأنه سيكون خاص بترويسة الموقع قمنا بفتح صف وهو الصف الاول في الجدول <tr>‏ ثم الخلية الوحيدة 
في الصف «td»‏ ثم وضعنا كود الصورة الترويسة الخاصة بالموقع وحددنا اسم الصورة ومكانها داخل مجلد اسمه imgs‏ كما في الكود < img‏ 
"imgs/header.jpg"‏ -ع-و> .ثم أغلقنا الخلية ثم الصف .</tr> </td>‏ 


من السطر ١7‏ الى السطر Y‏ قمنا بفتح الصف ثم الخلية واضفنا كود <ط> الخاص بتفخيم الخط ثم أضفنا كود عمل الرابط او الزر كما تعلمناه مسبقا 
قمنا بعمل a href="">‏ وهي بداية كود اللينك او الرابط او زر في القائمة الرئيسية لن اشرح كل حرف ATI‏ مشروح مسبقا فقط ما بين علامتي 
التنصيص وهي وجهة الرابط تركناه فارغا الى ان ننتهي من الصفحة كاملة وننسخ عدة صفحات نسخ عادي ونضع محتوى حسب ما نريد ثم نأخذ اسم 
الصفحة المراد الانتقال اليه عند ضغط الرابط ونضع اسمها مع الامتداد التابع لها مثل : <a href="index.html">‏ .بعد ان انهينا عمل بداية 
الرابط عملنا كود الخط واضفناه لعمل لون لاسم الزر او الرابط وحددنا رمز اللون كما ترون ثم أغلقنا الخط وبعده اغلقنا الرابط ثم أغلقنا كود تفخيم 
النص .اضفنا كود او تاق (nbsp&)‏ لعمل فراغات بين الرابط والذي يليه وهكذا مع بقية الروابط الى نهاية الخلية ونغلقهاء ثم نغلق الصف. 


من السطر ۳۷ الى ١١‏ بعد أن انهينا عمل الصف الذي يحوي الترويسة ثم قائمة الأزرار ننتقل لمرحلة عمل المحتوى للصفحة قمنا هنا بعمل صف 
جديد ثم فتحنا خليه وهي الأخيرة في جدول الموقع وداخل الخلية هذه سيتم وضع جدول داخل الجدول الرئيسي للموقع لماذا؟ جاءت هذه الفكرة من باب 
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التنظيم وضبط محتوى الموقع والتسهيل وحتى لا يتأثر الجدول الرئيسي بالمحتوى. قمنا بعمل جدول وكما تعلمنا فتحنا جدول وعملنا صف وفتحنا الصف 
ثم عملنا خليتين الأولى للصورة والثانية للنص. أي لدينا جدول عمودين والصفوف مفتوح لمن اراد يزيد. نغلق الجدول ثم نغلق الخلية ثم الصف ثم 
الجدول الرئيسي. بعدها ننهي محتوى صفحة ال[ددمغط وهي ال </body>‏ ثم » .X/html»‏ 
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CSS 


CSS stands for Cascading Style Sheet 


لغة تحدد شكل وثيقة 
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الباب الثالث CSS‏ 


mm Adobe® Dreamweaver® CS6 
Find the latest tips, podcasts, and more in 
Adobe® Bridge Home. + e 

برنامج الدريم ويكر (Adobe Dreamweaver CS6)‏ 
أحد البرامج المهمة والمستخدم في عمل صفحات المواقع الالكترونية سواء صفحات PHP-‏ وعمل الأكواد الخاصة HTML‏ وايضا الأكواد الخاصة 
بملفات CSSA‏ وغيرها. ويمكن تحميل البرنامج من موقعه الرسمي او أخذ اسطوانة فيها برامج ال Adobe CS6‏ او ما فوق من أي مركز تجاري في 


مجال الحاسوب أو من أي موقع آخر وتحميله على الجهاز ثم التركيب. 
صورة عامة للبرنامج 


DW File Edit View Inset Modify Format Commands Site Window Help 80+ + dav Designer - [pc L2 18 x | 


Open a Recent Item 


Q 
2 
F1 
5 
2 
Ej 
5 


Top Features (videos) 


w fonts/font.css 
fonts/font.html 
css/template.css. 

ow Web Font/font.css 

en-GB/en-GB.mod ...quickcontact.in 
en-GB/en-GB.mod ...quickcontact.in 
css/menu.css 
css/style.css 
mod news show... show sp2.php 
Open... 


HTML H ;|| CS6 New Feature Overview 
ColdFusion 
PHP. 


css f Business Catalyst Authoring 
JavaScript = 
XML 


j CSS Transitions Panel 


Fluid Grid Layout... || [jg] | jQuery Mobile Swatches 


Dreamweaver Site... 


E || PhoneGap Build Panel 
Business Catalyst Site... 0 j 


More... © More... 


Getting Started » Adobe® Dreamweaver® C S6. 
a New Features » Find the latest tips, podcasts, and more in 


Adobe® Bridge Home. 


k) 
dà 
dà 
e 


a Resources » 


ii Dreamweaver Exchange » 


|] Dont show again 


من خلال الصورة أعلاه وبحسب الترقيم : 

هذه هي واجهة برنامج او حزمة Dreamweaver CS6-‏ في بداية فتح البرنامج تظهر نافذة ضمن البرنامج تعطيك آخر الملفات التي كنت تعمل 
عليها. أو تقوم بإنشاء جديد. 

من خلال (File)‏ يمكننا انشاء ملف جديد ١‏ فتح ملف e‏ فتح آخر الملفات التي تم العمل عليها c‏ الحفظ c‏ الحفظ بأي صيغة وغيره. 

من خلال (Edit)‏ يمكننا التعديل على الملف الذي نعمل عليه سواء من حيث النسخ واللصق والقص والبحث عن كود معين او أكواد مكررة وغيرها من 
العمليات. 


(View)‏ ومن خلالها يمكننا التعديل على نوافذ البرنامج نفسه او عرض نوافذ التنفيذ والعمل ايضا وغيرها. 


(Insert)‏ من هنا يمكننا ادخال اي عنصر مع الكود بشكل جاهز سواء لصور او فيديوهات او جداول واشياء أخرى. 
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ماهى لغة او نقنية ال CSS‏ « 


هي لغة تصميم وتنسيق تحدد شكل وثيقة او صفحة الويب HTML‏ .من خلالها يمكنك تحديد شكل صفحة الويب وتنسيقها من حيث الشكل والمقاسات 
والمساحة وألوان الخلفيات والخطوط بكل دقة وحرفية. 


ما الفرق بين *HTML; CSS‏ 


لغة ال HTML‏ تحدد هيكل واساسيات صفحة الويب او (i gall‏ بينما لغة CSS‏ أكثر حرفية وسيطرة على شكل صفحة الويب وأكثر توسع ودقة 
وتقنيات أحدث من غيرها. 


cc NM CSSA طرق العمل على‎ 


«link rel-"stylesheet" type-"text/css" href-"style.css" /» : CSS ال‎ AX! هناك ثلاث طرق للعمل على‎ 


3 
4 
5 
6 
8 


</head> 


Inline Style Sheet طريقة السطر الوحد‎ 
. Internal Style sheet طريقة الربط الداخلي‎ 


.External Style Sheet طريقة الملف الخارجي‎ 


: Inline Style Sheet طريقة السطر الواحد‎ 


من خلال هذه الطريقة يمكنك عمل كود ال CSS‏ في نفس سطر الجزء الذي تريد عمل تنسيق له او ضبط. وكمثال على ذلك: عمل تنسيق 
لنص معين بواسطة CSS-!‏ 


</p> م>هنا نص معين‎ style="color: #ff0000; font-size: 12px; " > 


كما تشاهدون أعلاه عملنا تنسيق لنص معين حددنا لون النص وحجمه بواسطة كود بسيط كمثال في الشروحات القادمة سنتعمق أكثر في 
assi‏ ال CSS‏ . 


: Internal Style sheet طريقة الربط الداخلي‎ 


«head» 
«title»«title» 


«style type-"text/css"» 
CSS Content Goes Here 


«/style» 


</head> 


في هذه الطريقة يمكنك عمل كود ال CSS‏ داخل منطقة ال <head> </head>‏ تنشئ كود معين خاص بالتنسيق وفي داخل الصفحة في الاسفل 
والجزء الذي تريد تنسيقه تقوم باستدعاء هذا الكود مجرد استدعاء لا غير. ومن الشكل: 


من السطر ٠‏ الى السطر ^ يخص كود ال CSS‏ السطر ‏ بداية الكود وهو إشعار المتصفح بأن الكود التالي هو كود ال CSS‏ .السطر V‏ يمكننا عمل 
اكواد منفصلة كل كود له خواص معينة لأننا سنحتاج لكل جزء في الموقع كود معين ولن نطبق كود واحد لكل الموقع. 
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: External Style Sheet طريقة الملف الخارجي‎ 


هي الطريقة المستخدمة والأكثر حرفية والتي ستقوم باستخدامها لعمل المواقع الكبيرة أو موقع مؤسستك او موقعك الشخصي. وهي أن تقوم بعمل ملف 
خاص بكود ال CSS‏ وفي هذا الملف تضع جميع أكوادك الخاصة بالموقع أو حتى بالإمكان عمل عدة ملفات من أكواد ال CSS‏ حسب حجم diae‏ 
وطريقة ترتيبك ويكون الملف بهذه بصيغة ess‏ مثلا لدينا ملف ess‏ بأي اسم سيكون شكله التالي: style.css‏ ملف CSS‏ اسمه style‏ وال ووح. 
ترمز إلى أن الملف هو من نوع .CSS‏ 

الشكل العام لهذه الطريقة كالتالي: 


في السطر 5 طريقة استدعاء الملف الذي يحوي كود ال CSS‏ وكأن الأكود كلها موجودة في صفحة موقعك ويمكن استدعائها مثل كود ال CSS‏ 
الداخلي. 


عناصر هامة تستخدم ال CSS‏ فى ال (span - div) HTML‏ 
استخدمنا في الباب الأول في دروس ال HTML‏ الجداول لبناء الموقع هنا سنبني مواقع بدون استخدام الجداول الا اذا اقتضت الحاجه 
وقبل ان نتعلم حول ما هو ال +41 نسرد هنا بعض اسباب تفضيل المبرمجين له عن الجداول: 


- مرونة استخدام div-‏ وسهولة تعديله والتحكم به وباحترافيه. 
div- -‏ صديق لمحركات البحث. 
z‏ الجداول تعطي مظهر سيئ عند تحميل الصفحات ويبطئ التصفح. 


(Divisions TAG) DVLII وسم‎ of كود‎ - 


هو عبارة عن وحدة احتواء لعناصر صفحة الويب وبطريقة اخرى كبسلة العناصر وتقسيم محتوى صفحة الويب الى اقسام. ويكتب داخل 
صفحة الويب سواء ال HTML‏ أو ال PHP‏ بالشكل التالي: 


في الشكل امامك في السطر ٠١‏ هو بداية فتح كود DIV-‏ »في السطر em‏ 
D ۳‏ أغلقنا الكود وما بيذ 1 العناصر التي 1 5 يها ال <div style-"color:£0000FF"» DIV‏ 
سنتعلم ال CSS‏ على DIV-‏ بشكل واسع في الصفحات القادمة p‏ 


</body> 
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- كود of‏ وسم (SPAN TAG) SPAN.II‏ 
هو كود او وسم يتم استخدامه للنصوص والتحكم في خصائصها .في الغالب يستخدم div-‏ بدلا عنها ولاختصار الوقت والعمل يعمل الكود 
ويكتب كالتالي: كما في الشكل السطر ٠١‏ بدأنا كود spandi‏ بداخله استخدمنا استايل نوع inline‏ ووضعنا خاصية اللون الازرق للنص 

ووضعنا النص في وسط الكود ثم اغلقنا „spand!‏ 


8 «body» 

9 
10 «span style-"color:blue"» سيكون التص ازرق‎ Lia </span> 
11 
12 </body> 
13 


طريقة عمل ملف CSS‏ وربطه بصفحة الموقع : 


من خلال برنامج ال Dreamweaver cs6‏ والذي نستخدمه في أعمالنا نقوم بالخطوات التالية: 


نقوم بتجهيز مجلد خاص ونسميه CSS‏ في اي مكان في جهازك. نفتح برنامج الدريم ويفر Dreamweaver‏ ونضغط file‏ ثم new‏ 
ستظهر نافذة نختار أو خيار وهو HTML‏ ثم نضغط Create‏ أسفل النافذة على اليمين. هذه الخطوة لعمل ملف HTML‏ صفحة ويب 
رئيسية للموقع الذي سنعمل عليه CSS-‏ . 


نقوم بحفظ ملف HTML‏ .نضغط Ctrl.‏ مع حرف S‏ او من أعلى Bia‏ باسم ثم نحدد مكان المجلد الذي سنضع فيه محتويات العمل 
ونضع اسم للملف وليكن index.html‏ . ننشئ ملف وو .مرة أخرى نضغط على file‏ ثم new‏ ثم نختار من النافذة الخيار السابع وهو 
CSS‏ ثم نضغط زر Create‏ نحفظ ملف ال CSS‏ بعد ظهوره نقوم بحفظ الملف كما في الطريقة السابق بجانب ملف HTML-‏ ونسميه 
„style‏ لربط ملف ال css‏ مع ملف htmldi‏ او صفحة الموقع نكتب ما بين ال head‏ السطر التالي: 


«head» 
«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
«title»Untitled Document«/title» 


«link rel-"stylesheet" type-"text/css" href-"style.css" /» 


E 
4 
5 
6 
8 
9 


</head> 


سطر ۷ وهو كود الرابط (link)‏ مجرد كتابة الحرف الاول من الكود يساعدك البرنامج في كتابته. 


Rel‏ وترمز للغة الملف وحدد stylesheet‏ وهي موجودة في البرنامج تختارها اختيار type. bii‏ وترمز لنوع الملف وتم تحديد ما بين 
القوسين اعلاه. 


أما href‏ فهي ترمز لمكان الملف وعند كتابتك له يساعدك البرنامج في تحديد مكان الملف وسيتكفل بكتابة كود المكان. سيصبح لدينا ملفين 
هما index.html]‏ وهي صفحة الويب وملف آخر هو style.css‏ وهو ملف CSSJI‏ الذي سيتحكم بشكل صفحة HTML QI‏ او موقعنا. 


5 5 
كما في الشكل:‎ 
Fr Favorites c index.html KH style.css 
Chrome HTML Document Cascading Style Sheet Document 

EE Desktop 318 bytes EH | 41 bytes 

" Downloads 

E Recent Places 

û SkyDrive 
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خاصية الوراثة 

تستخدم ال CSS‏ خاصية الورائة» والوراثة هي استدعاء خواص معينه لتطبيقها على DIV‏ او نص داخل صفحة الويب. لماذا هذا 
الخاصية؟ جاءت هذه الخاصية لتسهيل العمل في CSS!‏ فبدلا من ان تقوم بعمل جدول او نص او DIV‏ داخل صفحات الويب ويكون 
عددها كبير ستضطر انك تضع خصائص الاستايل في كل جدول div.‏ ونص وتخيل عددها كبير.! لذلك جاءت خاصية الوراثة والتي تمكنك 
لعمل خواص معينة (الوان - مقاسات - ابعاد .. الخ ) داخل شيء اسمه class‏ في ملف css‏ وعند عمل div‏ مثلا او جدول تقوم بعمل كود 
بسيط وتقول للجدول او النص او الا خذ خصائصك من هذا الكلاس فقط. هذه هي الفكرة العامة للوراثة والكلاسات (class)‏ عملية 
وطريقة بسيطة جدا وممتعه نتعلمها في الدروس التالية. 


خواص عامة في ال88 : 


هناك بعض العناصر في صفحة الويب اساسية ومعروفة وفي الغالب لايتم عمل كلاس (CLASS)‏ لها وتحديد خواصها مباشرة في ملف ال 
CSS‏ .مثلا: body - h1 h2 h3‏ &. 


wa, ٠ | H DE *j a 
body (font-family: Tahoma, serif;font-size:14px} من خلال‎ bodyd حواص‎ e 0 نستطيع‎ 
hi(color:£000fff;) الكود التالي:‎ 


h1,h2,h3,h4{font-family:"Times New Roman", Times, serif} 


3 
4 
5 
6 
7 
8 


wW 


في السطر £ حددنا خصائص body-‏ كاملة 
اي ان اي عنصر او نص داخل body!‏ ليس لديه كلاس او gailai‏ معينه سيتم تعميم خواص ال ^de body‏ مباشرة. في السطر ٦‏ تم 
عمل لون للخطوط من نوع 1ط والتي تعلمناها مسبقا في باب ال html‏ وحدننا له لون معين لذلك اذا في كان هناك في الصفحة اي نص 11 
سيأخذ هذه الخاصة تلقائيا. 


في السطر A‏ لو اردنا عمل خاصية لأكثر من عنصر Sia‏ 11 و 12 هناك طريقة بسيطة نضعهم جميعا ونفصل بينهم بعلامة () والثي 
تعني (و) واو المعية. 


(CSS Classes jid) CSS الكلاسات والهوية فى ال‎ 


خاصية الل او الهوية: 


هي خاصية او مُحدد (selector)‏ يستخدمها :2025-5136 LEE #header{color:#930930;‏ 
A oa 5 "‏ . 5 
الووع لتحديد نمط او خصائص عنصر معين 6 


واحد فقط داخل صفحة الويب. ويعمل نفس عمل الكلاس لكنه لا يتكرر لأن الكلاس يعمل على تحديد نمط وشكل عنصر او مجموعة عناصر. 
ويكتب في ملف الووى بالشكل أعلاه تم إنشاء id‏ وسمي header‏ ويتم استدعائه في صفحة الويب والموقع بالشكل التالي: 
«body»‏ 


«div id-"header"» المحتوى‎ Lia </div> 


من خلال المثال أعلى اي محتوى داخل div-‏ سيأخذ الخصائص gall‏ .93 53 في ملف ال CSS‏ اللون والحجم. 


MOBILE: 00967 714490030 UTC e 
MOBILE 2: 00967 772755202 Email: info@techpio.net Ac es 


خاصية ال Classes‏ 


خاصية الكلاسات في ال CSS‏ تستخدم لتحديد شكل عنصر او أكثر في الموقع وغالبا ما تستخدم لمجموعة عناصر خلافا ل10.ويطبق 
بالشكل التالي في ملف CSSA‏ : 


7 .headert 

8 color:£C60C60; 

9 font-family:Tahoma, Geneva, sans-serif; 
10 


} 


في الشكل أعلاه قمنا بعمل كلاس واسمه header‏ ووضعنا قبل الاسم نقطة وتشير إلى أنه كلاس وليس diy‏ .بعد الاسم فتحنا القوس في 
السطر ۸ وضعنا خاصية اللون وفي السطر ‏ أضفنا خاصية اسم الخط او نوعه. في السطر العاشر أغلقنا قوس الكلاس. 
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خصائص الضبط فى ال CSS‏ 
سنقوم بسرد الخصائص الهامة والمعمول بها بكثرة في مواقع الويب وتطبيق هذه الخصائص عمليا معاً. وقبل البدء بالتطبيق على الخواص 
وسردها سنقوم الان بعمل iaia‏ بسيطة فيها div‏ ونصوص. في Aia‏ ال index.html‏ التي انشأناها مسبقاً نقوم بعمل الكود التالي: 


«body» 
<div id-"header"» هتا ترويسة الموقع‎ </div> 
«div» القائهة‎ Lia </div> 


«div»  عقوملا محتوى‎ Lia </div> 


في الحقيقة الكود السابق عبارة عن Y‏ صناديق او مربعات لكن عند تطبيقها وعرضها في المتصفح ستظهر بالشكل التالي: 


هنا ترويسة الموقع 
هنا القائمة 


2 M cod 
هنا محتوى الموقع‎ 


هنا يأتي دور ال CSS‏ لتحويل هذا الشكل من لا شيء إلى شيء واضح وجميل. داخل ملف ال CSS‏ سنقوم الان بعمل 14 لترويسة الموقع 
وليكن اسمه header‏ وداخل div-‏ للترويسة نجعله يستدعيها كما وضعناها من قبل شاهد أعلاه. في div-‏ الخاص بالقائمة سنضع لها 
كلاس وليكن اسمه menu‏ ونضع ايضا كلاس لصندوق المحتوى وليكن اسمه content‏ وسيتساءل البعض لماذا الصندوق الاول وضعنا 
id‏ ووضعنا class‏ للصناديق الباقية؟ بعد فهمك لهما يمكنك عمل ما تريد ليس هناك قيود وقد عرفناهما من قبل وعرفنا الفرق وحسب 
سياسة بناء مواقعك يمكنك استخدام ما تريد. 


نبدأ بتجهيز الكلاسات داخل ملف CSSA‏ وستظهر فارغة بالشكل التالي: 


Gcharset "utf-8"; 


fheaderí ( 
.menu( } 


.contentí) 


1 
2 
3 
E: 
5 
6 
8 
9 


كما تلاحظ أعلاه وضعنا الكلاسات وسميناها حسب ما اتفقنا مسبقاً UL‏ حفظ للملف qi.‏ الان دور استدعاء هذه الكلاسات من صفحة 
الويب index.html‏ كل صندوق أو div‏ يستدعي الكلاس الخاص به. وسيكون الاستدعاء كما بالشكل التالي: 
</div>‏ هنا ترويسة الموقع «div id-"header"»‏ 


«div class-"menu"» القائهة‎ Lia </div> 


«div class-"content"» هنا محتوى الموقع‎ </div> 


كما هو في الشكل اعلاه صندوق او diy‏ الترويسة استدعى ال10 الخاص به وهو div-ll s header‏ التابع للقائمة استدعى الكلاس التابع 
له وهو menu‏ وال div‏ الأخير الخاص بمحتوى الموقع أيضا استدعى الكلاس الخاص به. قم بالتطبيق .هل وجدت تغييرات € طبعا لا .لأنك 
كما تلاحظ أعلى في ملف الوو6916.0 الذي وضعنا فيه الكلاسات مازالت فراغة وليس بها اي خصائص في الدروس القادمة سنقوم 
بتعبئتها وتغيير شكل الموقع بشكل كامل كل خاصية على حده. 
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(CSS Borders) الجوائب‎ gi خاصية الحدود‎ 


من خلال هذه الخاصية يمكنك عمل حدود للصندوق ووضع لون مناسب ايضا وستايل محدد للحدود ايضا. والحدود هنا لها ثلاث قيم : 


Aau gia وهي لتعيين عرض الحدود قد يكون عرض نحيف او ثخين او‎ (border-width) عرض الحدود‎ -١ 
تعيين شكل الحدود إما منقط أو خط مقطع او خط عادي.‎ Ag: (border- style) شكل الحدود‎ - Y 
أيضا تعيين لون الحدود بأي لون تحدده.‎ isa (border- color)2533 لون‎ -Y 


يمكن كتابة الكود بالشكل التالي (التطبيق على الترويسة الخاصة بالمثال) : 


#header{ 
border-color: #933; 
border-width:medium; 
border-style :dotted:| } 


4 
5 
6 
8 


.menu( } 


.contentí) 


في السطر ه استخدمنا احد خاصية الحدود وهي اللون وحددنها ثم أغلقنا بفاصلة منقوطة وهي مهمة جدا(الفاصلة) . 


(ملاحظة في برنامج الدريم ويفر الذي سنستخدمه يساعدك كثيرا في عمل البرمجة فهنا مجرد عمل كلمة border‏ سيقوم البرنامج بوضع 
خيارات كثيرة امامك لاختيارها ليسهل عليك الكتابة وسترى انواع وطرق كثيرة ل border‏ .) .في السطر 3 حددنا العرض واخترنا 
0 وتعني متوسط. في الغالب نستخدم خاصية البيكسل وهي بدل «iSi medium‏ :م1 او أي عرض نريده. جربها سنستخدمها 
بكثرة فيما بعد. 


في السطر السابع حددنا شكل الحدود واخترنا dotted‏ وتعني منقط هناك خيارات كثيرة ستظهر لك في البرنامج وغالبا نستخدم solid‏ هذه 
الخاصية حدود خط واحد. 


بعد شرح الكود وحفظ الملف نأتي لنرى النتيجة سيظهر الموقع في صفحتنا index.html]‏ بالشكل التالي : 


من خلال ملاحظتك للموقع ستتساءل لغرابة الشكل US,‏ دعنا نقوم ببعض التعديلات وخواص الحدود وانظر الكود التالي: 


fneadert 
border-color:$£933; 
border-width: 1px; 
border-style:solid;} 


قمنا بتعديل العرض واخترنا العرض ×م1 وتعني واحد بكسل فقط, عدلنا شكل الحدود من منقط إلى خط solide‏ وسيظهر الموقع 
بالشكل التالي: 
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هنا ترويسة الموقع] 
هنا القائمة 


هنا محتوى الموقع 


كما رأيت في الشكل السابق عملنا id‏ ووضعنا خاصية واحدة من خصائص ال55) وهي borderi‏ بقيمها المتنوعة .نقوم الان بنسخ 
نفس خصائص ال 11 للكلاسات الخاصة بالقائمة والمحتوى وسيظهر الكود في ملف ال88 بالشكل التالي: 


fhneader( 
border-color:£933; 
border-width: 1px; 
border-style:solid;} 


.menut 
border-color:£933; 
border-width: 1px; 
border-style:solid; } 


.content { 
border-color: £933; 
border-width: 1px; 
border-style:solid;?! 


قم بالحفظ وافتح صفحة الموقع في المتصفح مرة أخرى لنرى النتيجة. ستراها بالشكل التالي: 


هنا محتوى pid‏ 


يمكنك استخدام الطريقة الاحترافية والتي تستخدم لعمل الكود السابق الخاص بالكلاس او ال id‏ وتحويل السطور الثلاثة الى سطر واحد 
كالتالي: 
#header{‏ 


border:#933 1px solid; 
} 


Bay‏ وكأنك تقول برمجيا: الحافة تأخذ لون #993 وعرض 1px‏ وشكل solid‏ من دون أن تكتب الخاصية. وهي الطريقة الأسهل والاسرع 
والافضل. 
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قم بتجربة الخصائص والقيم التالية في ال border‏ : 


الخاصية الوظيفة 


- 


خاصية اللون للحافة اليمنى فقط 

(في التطبيق السابق طبقنا على جميع الحواف وهنا يمكنك عمل خصائص للجوانب 
التي تريدها سواءً (top - right — left - bottom‏ 

border-right-style: value;‏ | خاصية شكل الحافة يمين فقط 


border-right-width: value;‏ | خاصية عرض الحاثة من اليمين فقط 


border-right-color: value; 
تعني القيم التي تختارها)‎ : value) 


border-top: 1px solid #333333;‏ | خاصية الحافة للأعلى: عرض 1px‏ نوع solid‏ اللون كما هو محدد 
border-top-style: value;‏ | خاصية نوع الحدود في الأعلى (منقط ‏ خط ( 


border-top-width: value;‏ | خاصية عرض الحدود في الأعلى 
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خاصية الطول والعرض (CSS Width and Height)‏ 
من خلال هذه الخاصية يمكنك التحكم بمقاسات الطول والعرض داخل صفحة الويب وهي من الخواص المهمة في CSS-I‏ وتكتب بالشكل 
التالي: 
$header(‏ 
border:£933 1px solid;‏ 


width:800px; 
height:900px; 


خاصية width‏ وتعني العرض في السطر V‏ وتضع القيمة المناسبة ثم الفاصلة المنقوطة. السطر height V‏ وتعني الارتفاع وتحدد لها 
القيمة. 
طبعا يمكنك عمل القيمة بثلاث طرق وهي : 

-١‏ القيمة بالبيكسل مثل : كما في المثال السابق. 

-Y‏ القيمة بالنسبة مثل :  width:5096;‏ وتعني خمسين في المائة من عرض المتصفح لأي مستخدم. 

۳- القيمة الاتوماتيكية مثل : width: auto;‏ وتعني مقاس اتوماتيكي أي اذا يصغر ويكبر سواء الطول والعرض حسب المحتوى 


للموقع مثل الطول لا تستطيع ان تجزم بطول الموقع مثلا لديك مقالة في موقع اخباري منها الصغيرة والكبيرة يكبر الطول مع 
المقالة الطويلة ويصغر مع الصغيرة. 


طبق المقاسات السابقة على header-!‏ في الموقع الخاص بالتطبيق. سينتج لك الشكل التالي: 


Bay‏ شكل الموقع العرض اصبح ٠٠١‏ بكسل والطول 1٠٠١‏ سنقوم الان بتعديل الطول وجعله ٠٠١‏ بكسل. أيضا agii‏ بوضع مقاسات 
القائمة من خلال الكلاس الخاص بها الطول ٠‏ ؛بكسل العرض ٠٠١‏ بكسل ايضا المحتوى نضع له مقاس خاص به العرض ٠٠١‏ بكسل 
الطول نجعله اتوماتيكي. وسيظهر الكود بالشكل التالي: 
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$header( 
border:£933 1px solid; 
width:800px; 
height:200px; 
} 


4 
5 
6 
8 
3 


.menut 
border:£933 1px solid; 
width:800px; 
height:40px; } 


.contentí(border:£933 1px solid; 
width:800px; 
height:auto;! 


بعد عمل الكود أعلاه وحفظه نقوم بتجربة الموقع او الصفحة الخاصة بالتطبيق وستظهر بالشكل التالي: 


(CSS Margins) الهوامش‎ 

ونعني بالهوامش هنا المساحات الجانبية او الافقية وهي مقدار بعد العنصر عن الأعلى أو الاسفل او اليمين واليسار. وتكتب بأحد الأشكال 
التالية: 

margin-right‏ وتعني مقدار الهامش من اليمن. 
margin-left‏ وتعني مقدار الهامش من اليسار. 
margin-top‏ وتعني مقدار الهامش من أعلى. 


margin-bottom‏ وتعني مقدار الهامش من أسفل. 


بالنسبة للقيم بمكن ان تكون بالبيكسل أو اتوماتيكي وسيتم وتطبيق كلا منهما على حده. وسنقوم بتطبيق جميع الخصائص اعلاه للهوامش في 
التطبيق الخاص بنا وبالتحديد ل header‏ وسيكون بالشكل التالي: 


#header{ 
border:#933 1px solid; 
width: 800px; 
height: 200px; 
margin-right:5px; 
margin-left:5px; 
margin-top:5px; 
margin-bottom:5px; 
) 


tn un 


om 


5 
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كما تشاهد أعلاه في السطر A‏ حددنا هامش الترويسة من اليمين وحددنا الهامش بمقدار ٠‏ بكسلء أيضا السطر 4 حددنا الهامش من جهة اليسار بمقدار 
o‏ بكسل السطر ٠١‏ حددنا الهامش من الجهة العلوية بمقدار ه بكسلء أيضا في السطر ١١‏ حددنا الهامش من اسفل بمقدار © بكسل. 


نأتي الآن لمشاهدة النتيجة وكيف سيظهر شكل الموقع بعد حفظ التغييرات أعلاه. وحسب الشكل التالي: 


هنا ترويسة الموقع 


Bay‏ في المثال أعلاه ان الترويسة تم إبعادها عن جميع الجوانب بمقدار 5 بكسل. إذا اردنا ان نجعل الترويسة او أي صندوق في الموقع في وسط 
الصفحة او المتصفح نقوم بعمل قيمة (auto)‏ لكل من الهامش من اليسار واليمين فقط. وتعني ان الموقع يظهر في وسط المتصفح سواء كان طويلا او 
عريضا. نقوم بتطبيق ذلك وسيكون بالشكل التالي(لاحظ السطرين ^59(« 


#header{ 
border:#933 1px solid; 
width: 800px; 
height : 200px; 
margin-right:auto; 
margin-left:auto; 
margin-top:5px; 
margin-bottom:5px; 
) 


هناك طريقة لدمج جميع القيم الخاصة بالهامش في سطر واحد وايضا طريقة أخرى لجعل جميع الصناديق داخل صندوق واحد ونقوم بتوسيط الصندوق 
الذي سيحتوي على الصناديق أو div-i‏ الموجودات في موقعنا. 
في البداية نقوم بجمع جميع الق داخل ديف واحد ولنسميه main‏ ونضع له كلاس ونسميه ايضا main‏ سيكون الكود في صفحة ال htm]‏ كالتالي: 
«div class-"main"»‏ 
</div>‏ هتا ترويسة الموقع «div id-"header"»‏ 
Lia </div>‏ القائمة «div class-"menu"»‏ 


«div class-"content"» هتا محتوى الموقع‎ </div> 
«/div» 


في السطر ٠١‏ فتحنا div-‏ واعطيناه كلاس main‏ وفي السطر ١8‏ أغلقناه وجعلنا جميع div-i‏ البقية داخله. سنقوم الان بوضع الخصائص المناسبة 
للكلاس main‏ في ملف style.css‏ وستكون خصائصه بالشكل التالي: 


.maint 
margin:O0 auto; 
border:£F30 solid 1px; 
width:800px; 
) 


قمنا بعمل الكلاس الخاص بال العام الذي سيحوي جميع محتوى الموقع main‏ .في السطر o‏ استخدمنا خاصية الهامش بطريقة أخرى وهي تعني 
مقدار الهامش لأعلى واسفل يساوي صفر ومقدار الهامش من اليمين واليسار اتوماتيكي. وهي اختصار للشكل التالي من السطر ۷ الى السطر ٠١‏ : 
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.main{ 
border:#F30 solid 1px; 
width: 800px; 
margin-top: 0; 
margin-bottom: 0; 
margin-left: auto; 
margin-right : auto; 


بعد تطبيق الكود السابق الخاص بالل العام والهامش للتوسيط سيظهر لنا الموقع بالشكل التالي: 
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سنقوم بإلغاء اللون الأحمر الخاص بحدود ال019 العام ونكتفي به كتوسيط وحاوي لبقية divi‏ .سنلغي السطر رقم © من كلاس main‏ حتى لا يظهر 
الحدود الخاصة به. ويكون معنا الشكل التالي: 


هنا ترويسة الموقع| 


من خلال ملاحظتنا للتطبيق أعلاه سنقوم بعمل مسافة ما بين القائمة والترويسة وما بين محتوى الموقع والقائمة. فكر ماذا يمكن ان نقوم به وما هو 
الكود الذي سنستخدمه النتيجة في الشكل كالتالي: 


هنا ترويسة [35d‏ 


هنا القائمة| 


هنا محتوى الموقعأ 


الحل : قمنا بعمل مساحة هامش من أعلى لكل من كلاس القائمة وكلاس محتوى الموقع بمقدار ۳ بكسل في السطرين ١8‏ و 4" كما في الكود التالي: 


.menut 
margin-top:3px; 
border:£933 1px solid; 
width:800px; 
height:40px; ( 


.content(border:£933 1px solid; 
margin-top:3px; 
width:800px; 
height :auto;} 


ملاحظة: يمكنك استخدام القيم الخاصة بالهامش (margin)‏ بالسالب اذا اقتضت الحاجه. جرب ضع قيم بالسالب ولاحظ ماذا يحدث. 


الخلفيات (CSS backgrounds)‏ 
يمكنك استخدام خاصية الخلفية أكثر دقة من ذي قبل ويمكن تحديد خلفية لأي عنصر في صفحة الويب وتستخدم بكثرة وسنأخذ هنا خواص وقيم 
الخلفيات في CSS‏ الأكثر استخداما. يمكننا استخدام الخلفية كصورة أو لون معين والقدرة على التحكم بمكان الخلفية وثباتها. 


. لتحديد الخلفية ك لون‎ background-color 
لتحديد الخلفية ك صورة.‎ background-image 
لتحديد مكان الخلفية (توسيط  يمين  اعلى — أسفل .. الخ).‎ background-position 


.) لتعميم خلفية معينة صغيرة بواسطة تكرارها. واتجاه التكرار (افقي  عمودي‎ background-repeat 


MOBILE: 00967 714490030 RNC 
MOBILE 2: 00967 772755202 Email: info@techpio.net Angl nes 


background-attachment‏ لتحديد ثبات او امكانية تحرك الخلفية عند التصفح. 


سنقوم بعمل خلفية للتطبيق الخاص بنا ونلون خلفية الترويسة والقائمة والمحتوى نحدد لون كخلفية وهي عن طريق وضع كود الخلفية في ال10 
المسمى لدينا header‏ والكلاسات البقية ملف CSS-I‏ كالتالي : 


fheader( 
border:£933 1px solid: 
width:800px; 
height:200px; 
background-color:£F90; 
) 


.menut 
margin-top:3px; 
border:£933 1px solid; 
width:800px; 
height : 40px; 
background-color: #FFC; } 


.content {border: #933 1px solid: 
margin-top: 3px; 
width: 800px; 
height:auto; 
background-color: #FFC;|} 


WO WO N N N RR 


لاحظ في السطور ١١‏ و Y£‏ و ٠١‏ في الكلاسات تم استخدام كود الخلفية الخاص بالألوان واخترنا قيمة لون محدد. شاهد النتيجة وتطبيقها بعد الحفظ: 


هنا القائمة 


هنا محتوى الموقع| 


نقوم الان بوضع خلفية للترويسة بواسطة صورة بحيث تكون مقاسات الصورة نفس مقاسات الترويسة الطول ٠‏ بكسل العرض ٠٠١‏ بكسل. 


نقوم من خلال برنامج الفوتوشوب بعمل الصورة اللازمة بأي لون واي شكل. معنا الترويسة التالية: 


media 


دورة المواقع والإعلام الإلكتروني 
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نقوم بعمل مجلد خاص بالصور داخل ملف العمل CSSA‏ ونسميه imgs‏ يصبح لدينا الملفات التالية: 


5 index.html (css | بت‎ style.css 
D بيد‎ ld c Chrome HTML Document Bh Cascading Style Sheet Document 
chica 606 bytes 


495 bytes 


نحفظ الصورة التي تم تصميمها بصيغة jpg‏ ونضعها في مجلد الصور الذي Lia‏ بإنشائه. بعدها نقوم بعمل الكود الخاص بخلفية الصورة وهو 
background-image‏ عند عمل هذا الكود مع النقطتين ستشاهد خيار يعطيه لك برنامج Dreamweaver)‏ كما في الصورة: 


fheader( 
border:£933 1px solid; 
width:800px; 
height:200px; 
background-image: 


) «9 Browse... 
® inherit 
.menut ® none 


LE 
margin-top: 3px; 7 E 
border:#933 1px solid; 


من الخيارات نختار browse‏ ونذهب لمكان الصورة التى صممناها ونختارها وسيقوم البرنامج بوضع الكود امامك كما فى الصورة التالية: 
3 يفوم البرئامج بوصع في 2 


#header{ 
border:#933 1px solid; 
width: 800px; 
height: 200px; 
background-image : url (imgs/image1.jpg): 
} 


في السطر ١5‏ اخترنا الصورة والتي اسمها imagel.jpg‏ والموجودة في مجلد imgs‏ ويرمز url!‏ الى الرابط الخاص بمكان الصورة كما هو اعلاه. 


نقوم بعمل خلفية من نوع آخر. حسب التصميم التالي: 


imagel jpg image2 jpg 


Bay‏ الصورة image2.jpg‏ العرض YY‏ بكسل الطول ٠٠١‏ بكسل سنقوم بعملها كخلفية للموقع (الترويسة) نقوم بالتجربة أولا ونرى كيف ستظهر. 


وحسب الكود التالي: 


$hneader( 
border:£933 1px solid; 
width:800px; 
height : 200px; 


background-image : 1121 (imgs/image2.jpg) ; 
t 


من خلال الكود السابق ستظهر النتيجة التالية. 
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هنا القائمة 


هنا محتوى الموقع| 


من خلال الكود السابق يمكن تحديد تكرار الخلفية سواء بشكل أفقي (X)‏ او عمودي SL (Y)‏ قمت الان بتوسيع مقاسات الترويسة الطول والعرض 
ستظهر الخلفية بشكل كامل ويتم تكرارها افقي وعمودي عند عدم تقييدها بكود معين. 


سنقوم الان بعمل الكود المناسب لهذه الخلفية حسب التالي: 


fheader( 
border:£933 1px solid; 
width:800px; 
height:200px; 
background-image:url (imgs/image2.jpg): 
background-repeat:repeat-x; 
} 


في السطر١١‏ خاصية تكرار الخلفية حددنا اتجاه التكرار بشكل أفقي فقط. للتأكد قم بتعديل الطول قبل وبعد التعديل من ٠٠١‏ الى ٠٠١‏ بكسل ولاحظ. 
نقوم بإرجاع الخلفية السابقة imagel.jpg‏ . 

خاصية (background-position)‏ في حال لديك خلفية لموقع صغيرة مثلا يمكنك اختيار هذه الخاصية وجعل الخلفية تتوسط الصفحة بإمكانك أيضا 
وضعها في اسفل واعلى الموقع. جرب ذلك. 


خاصية (background-attachment)‏ تعمل على تثبيت الخلفية bodyt‏ لتعطي نوع من الشكل الثابت للخلفية العامة بحيث اذا حركت الموقع الى 
اسفل او على يتحرك div-‏ العام للموقع تضل خلفية body-‏ ثابته. ويمكنك اعطاء القيمة fixed‏ لها. جرب ذلك ايضا. 
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طريقة أخرى لعمل الخلفية والصورة التي قمنا بعملها للترويسة. والطريقة كالتالي: 


-١‏ نقوم بعمل خلفية للون الذي صممنا منه الصورة ونجعله للترويسة. 
؟"- نصمم شعار واسم الموقع في صورة صغيرة خلفيتها نفس خلفية الترويسة او نجعلها شفافة. 
-Y‏ نضع صورة الصورة داخل div-‏ الخاص بالترويسة وننشئ لها كلاس لتحديد مكانها إن لزم الأمر. 


لاحظ الصورة التي صممناها وسميناها logo.jpg‏ ووضعناها في مجلد imgs-‏ 


x Favorites 
WE Desktop 
Jj. Downloads 


Î Recent Places |. ecl 


imagel jpg image2.jpg‏ عجر كه 


3j Libraries 

& Apps 

B Documents 
2 Music 

i] Pictures 
EE videns 


سنقوم بوضع الصورة داخل div-‏ الخاص بالترويسة ونحذف كلمة UA)‏ ترويسة الموقع) .ونقوم ايضا بحذف كود الخلفية الخاص بالصورة نستبدله 
بخلفية اللون كما في الكود: 


«div class-"main"» 


«div id-"header"» 
«img src-"imgs/logo.jpg"; /» 


«/div» 
وضعنا صورة الشعار.‎ ٠١ في السطر‎ 
12 2 
13 border:£933 1px solid; 
14 width: 800px; 
Tu height:200px; 
1 


0 


background-color: #ff9900; 
background-position: center; 
background-attachment : fixed; 
} 


شم فم فم 
ل 


io م‎ 


في السطر ١5‏ وضعنا خلفية اللون» وستكون النتيجة بالشكل التالي: 


media 


دورة المواقع والإعلام الإلكتروني 


pes 


هنا محتوى الموقع] 


Bay‏ الصورة ذهبت لليسار. يمكننا إضافة خاصية معينة للق الخاص بالترويسة وهي خاصية اتجاه المحتوى وان يبدأ من اليمين لليسار بواسطة 
الخاصية direction‏ نقوم بوضعها في ال10 الخاص بالترويسة شاهد الكود التالي: 
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$header( 
border:£933 1px solid; 
width:800px; 
height:200px; 
background-color:£tff9900; 
background-position:center; 
background-attachment:fixed; 
direction:rtl; 
3 


في السطر ١5‏ اضفنا الخاصية direction‏ وحددنا القيمة rtl‏ وتعني من اليمين الى الشمال. وهذه الخاصية مهمه جدا نظرا لأن المواقع باللغة العربية 
تستخدم هذه الخاصية لمحتوياتها سواء للنص او الصور او اتجاه اي عناصر داخل الموقع. بعد التعديل والحفظ سيظهر الموقع بالشكل التالي: 


media 


6)93 المواقع والإعلام الإلكتروني 


هنا القائ 


هنا محتوى الموقع| 


ملاحظة: استخدمنا طريقة الصورة والخلفية لجعل محتوى الموقع اقل حجما وان لا يكون الموقع مليء بالخلفيات والصور التي تؤثر على سرعة 
التصفح للموقع. 


خاصية زوايا الحدود (CSS border-radius)‏ 


من خلال هذه الخاصية يمكنك التحكم بزوايا div-i‏ وجعل زواياه اكثر مرونة وتحويلها من زوايا حادة الى زوايا ملتوية باستخدام الكود border-‏ 
radius‏ والقيم الخاصة بها بالبيكسل. سنقوم بتطبيقها على الترويسة وجعل الزوايا الاربع ملتوية بمقدار © بكسل. شاهد الكود ثم النتيجة: 


#header{ 
border:#933 1px solid; 
width: 800px; 
height: 200px; 
background-color: 4229900 
background-position: center; 
background-attachment : fixed; 
direction:rtl; 
border-radius:5px 5px 5px 5px; 
) 


من خلال الكود اعلاه سطر ٠١‏ تم عمل الكود وحددنا مقدار حدة الزوايا او التوائها بالترتيب الاولى للزاوية اليسار العلوية الثانية للزاوية اليمنى العلوية 
الثالثة للزاوية السفلى في اليمين. بطريقة أخرى حسب اتجاه عقارب الساعة والبداية من أعلى اليسار. 


عند الحفظ والتطبيق سيظهر لدينا بالشكل التالي: 
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دورة المواقع والإعلام الإلكتروني 


هنا القائمة] 


هنا محتوى الموقع| 


شاهد أعلاه تم تعديل الزوايا وتحويلها من زوايا حاده الى زوايا ملتوية بمقدار ٠‏ بيكسل. قم بتغيير القيم وجرب بنفسك. حاول ان تجعل الزاويتين 
العلويتين غير حادتين والسفليتين حادتين. يمكنك استخدام الصفر ايضا صفر بيكسل. 


(CSS Text Properties) خصائص النصوص‎ 

سنستعرض أهم خصائص النصوص المهمة دفعة واحد وهي من أهم الخصائص التي تقوم بعمل تنسيق وتلوين النصوص حسب ما يراه المصمم أو 
مدير الموقع. 

قبل البدء بخواص النصوص .سنقوم بتطبيق خصائص النصوص على محتوى الموقع للتطبيق الذي نعمل عليه نضع صندوقين او div Y‏ داخل صندوق 
أو div‏ المحتوى في الموقع ونضع لهما خصائص من حيث المقاسات والحدود كما تعلمنا. نضع الصورة على الصندوق الأيسر والصندوق الأيمن 


للنص. سنضيف كلاسين واحد لليمين وواحد لليسار كي نحدد خصائص كل واحد من منها. 


dai‏ بعمل الكلاسين داخل ملف CSSA‏ الكلاس الخاص divo‏ الايسر نسميه imgdiv‏ والذي سيحوي الصورة ونسمي الكلاس الذي سيتحكم 
بخصائص div-!‏ الذي سيحوي النص text‏ والتسميات هنا حسب ما تريد المهم ان لا تختار اسم محجوز Ja‏ 112,12 أو .p 3! body‏ 


سيكون شكل الكلاسات كالتالي: 


.imgdiv{} 


texti} 


كما تلاحظ في السطرين Y‏ و8” تم عمل الكلاسات وكما تراهما فارغين. نقوم الان بعمل div Y‏ داخل div-‏ الخاص بمحتوى الموقع كما اتفقنا مسبقا 
في ملف index.html‏ وسيكون الكود كالتالي: 


م 


«div class-"menu"» القائمة‎ Lia </div> 


Oo wo 


«div class-"content"» 
<div class-"text"» 
هتا ستكون الصورة‎ 
«/div» 

«div class-"imgdiv"» 


(n uS (0) کر يم‎ 


سر NP‏ رخن ټم £19 ركنن زكرا ټم ډم JN‏ 


D OD "| لزع‎ 


في السطر ٠١‏ بداية الصندوق او الل الذي يحتوي الصندوقين الخاصين بالصورة والنص. ونهايته في سطر ۲۸.في السطر lae ۲١‏ صندوق أو 
div‏ النص واعطيناه الكلاس الخاص به الذي سيحتوى على خصائصه وأغلقناه في سطر ۲۳ .في السطر 74 أنشأنا صندوق او 1ل الصورة واعطيناه 
الكلاس الخاص به وأغلقناه في سطر 5" .سيكون الشكل كالتالي: 
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سنقوم الان بوضع خواص لل١ div‏ الخاصين بالصورة والنص. سنضع الخواص والقيم التالية: 


- نحدد عرض div-i‏ الخاص بالصورة ٠٠١‏ بيكسل. 
- نحدد العرض الخاص بال النص 58٠١‏ بيكسل. 
- نحدد الحدود الخاصة بالصندوقين وتحديد لون معين. 


بعد تنفيذ ما سبق سيكون الكود في ملف ال CSS‏ بالشكل التالي. 


.imgdiví 
width:190px; 
border:1px solid £FCO; 
} 


3 
3 


.text( 
width:580px; 
border:1px solid 0: 
float:right] 


} 
في السطر Y‏ أنشأنا كلاس خاص بصندوق أو div‏ الصورة وخصصنا له بعض الخصائص وهي : 

السطر ۳۷ وحددنا في العرض ١5١‏ بكسل. 

السطر ۳۸ وحددنا فيه cil gall‏ او اطراف الال من حيث السمك ١‏ بكسل ونوع الحواف خط عادي واللون كما هو محدد اعلاه KFCO)‏ 
في السطر £1 انشأنا diy‏ النص واسميناه text‏ وحددنا فيه خصائص الصندوق الخاص بالنص واعطينا الخصائص التالية: 

العرض وحددناه ٥۸٠١‏ بكسل. 

الحواف كما في صندوق الصورة. 

وحددنا خاصية المكان (float)‏ وحددنا يمين (right)‏ والهدف منه جعل الديف في نفس السطر بجانب الديف الخاص بالصورة على اليمين. 


وسيكون الكود في ملف php-‏ كالتالي: 
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<body> 
<div class="main"> 


<div id="header"> 
«img src-"imgs/logo.jpg"; /» 
</div> 


<div class="menu"> القائمة‎ Lia </div> 


«div class-"content"» 
«div class-"text"» 
gai! سيكون‎ Lia 


«/div» 
«div class-"imgdiv"» 
ستكون الصورة‎ Lia 


</div> 
</div> 
</div> 


</body> 


بعد تنفيذ الأكواد السابقة سيكون شكل الموقع كما في الصورة التالية: 


media 


دورة المواقع والإعلام الإلكتروني 
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نأتي لعمل النص وخصائصه. نقوم بعمل DIV‏ خاص بالعنوان داخل الديف الخاص بالنص وديف آخر بتفاصيل العنوان نفسه ونقوم بعمل كلاسين كلاس 
يخص العنوان وكلاس يخص التفاصيل ونضع لهما التسمية المناسبة : 


بداية نقوم بعمل كلاسين للنص والتفاصيل في ملف ال style.css‏ كالتالي : 


.title() 


.detailsí! 


كما تشاهد أعلاه تم عمل كلاس (title)‏ ويخص العنوان وكلاس (details)‏ ويخص التفاصيل. نقوم الان بعمل الديف الخاص بالعنوان والديف الخاص 
بالنص وربطهما بالكلاسين أعلاه في ملف „index.html‏ كما في الصورة التالي: 


«div class-"content"» 
«div class-"text"» 


«div class-"title"»j5!,4ix | Liac«/div» 
«div class-"details"»j5!,4i*x JL» التقاصيل الخاصة‎ Liac/div» 


«/div» 
«div class-"imgdiv"» 


هتا ستكون loe!‏ 


Q N N N N NY N NY NY RY RY 


ات در نزخ یں شر ی ي ل 66 0ا © ضر 


</div> 
</div> 


I^] 


من خلال ما سبق نلاحظ Uil‏ أنشئنا diy‏ خاص بالعنوان وأعطيناه او ربطناه بكلاس (title)‏ وأنشأنا ديف التفاصيل أعطيناه كلاس (details)‏ نقوم 
الآن بعمل عنوان مناسب كتجربة بالإضافة الى تفاصيل أخرى كبيانات افتراضية كما في الصورة التالية: 


<div class-"title"»44. j| - <017/,>جزيرة سقطرى جهال الطبيعة والسياحة‎ 
«div class-"details"» 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي أرخبيل يمني مكون 
من أريع جزر على المحيط الهتدي قبانة سواحل القرن الأقريقي 350كم 
جتوب شبه الجزيرة العربيية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا 
وشيه الجزيرة العريية قد dis‏ مستوى قريد 
وغير مأنلوق من الاستيطان الحيوي على الجزيرةء وكذلك قي المستوى الاجتماعي لسكان الجزيرة 


«/div» 


</div> 


كما تلاحظ أعلاه اضفنا عنوان وتفاصيل وستكون النتيجة في المتصفح كالتالي: 
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media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليه 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة هي أرخبيل يمني مكون من أريع جزر على المحيط الهندي قبا 
سواحل القرن الأفريقي 350كم جنوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وتبه الجزير 
العريية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك في المستوى الاجتماعي لسكاز 


أصبح لدينا عنوان وتفاصيل ضمن الصفحة ونأتي لتعلم الخصائص الخاصة بالنصوص والعناوين. 


خاصية الاتجاه (direction)‏ 

من التطبيق الخاص بنا نشاهد ان العنوان والنص بدأ اتجاهه من اليسار ومن هنا يأتي دور خاصية الاتجاه direction‏ لتحديد اتجاه النصوص نقوم 
بعمل الخاصية لنص أعلاه وبإمكاننا وضع الخاصية في عدة ديفات حسب الحاجة هنا نضع الخاصية في كلاس الديف الخاص بالنص (text)‏ ونختار 
القيمة right‏ والتي تعني اتجاه النص من اليمين الى اليسار كما في الصورة: 


.textí 
width:580px; 
border:1px solid £FCO; 
float:right; 
direction: 

® inherit 

ذا © ) 

.title{} S. limportant 


.details() 


كما تلاحظ أعلاه هناك عدة قيم لخاصية الاتجاه وما يهمنا هنا هي القيمتين (ltr)‏ وتعني من اليسار إلى اليمين والقيمة (rtl)‏ وتعني من اليمين إلى 
اليسار وهي الاكثر استخداما في المواقع العربية. نقوم باختيار القيمة rtl‏ .وستكون النتيجة بعد الحفظ كالتالي: 


media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


قطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة هي أرخبيل يمني مكون من أربع جزر على المحيط الهندي قبالة 

احل القرن الأقريقي 350كم جوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وتبه الجزيرة 
لحريية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة وكذلك في المستوى الاجتماعي لسكان 
لجزيرة 
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من الصورة أعلاه نرى أن النص مع العنوان اتجه إلى اليمين إلى اليسار. نقوم الان بإضافة خاصيات أخرى لجعل العنوان والنص يبدوان بالشكل 
المطلوب. 


خاصية الإزاحة (Padding)‏ 
هي خاصية هامة بالنسبة للنصوص وتعمل على عمل مسافة بين المحتوى (النص) وأطراف الديف الذي يكون فيه النص نفسه لاحظ الشكل للتوضيح: 


Hello World 


باعتبار ان الديف الخاص بالنص يحمل اللون الرمادي وان النص في الديف يجب ان تكون بينه وبين اطراف الديف مسافة كما هو موضح باللون 
الاصفر هذا مانعني Padding-‏ . 


نقوم بتطبيق الخاصية على الديف الخاص بالعنوان والديف الخاص بالنص وعمل مسافة من الأعلى واليمين والاسفل واليسار. وبوضع الخاصية في 
ملف style.css-!‏ سيكون بالشكل التالي: 


.titlet 


49 
50 


0 padding:3px 3px 3px 3px; 
51 l 

52 

53 .detailst 

54 padding:3px 3px 3px 3px; 
55 H 


كما تلاحظ أعلاه أعطينا قيمة Y‏ بيكسل للنصوص (العنوان - التفاصيل ( في الكلاسات الخاصة بهم. ويمكن تعديل القيمة بحسب الحاجة بعد الحفظ نلاحظ 
التغيير التالي بالنسبة للمسافة بين جوانب النصوص: 


media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة هي أرخبيل يمني مكون من أريع جزر على المحيط الهندي قبالة 
سواحل القرن الأقريقي 350كم جتوب تيه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا ,412 الجزيرة 
الحريية قد cil.‏ مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة وكذلك في المستوى الاجتماعي لسكان 
الجزيرة 
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خاصية ( اللون — الحجم — اسم الخط - أخرى ) 


سنضع هنا خصائص عدة مجتمعة كوني أراها خواص مجتمعة دائما : 


- خاصية color-‏ : تحدد هذه الخاصية لون الخط ويعطى كود أو اسم اللون كما تعلمنا مسبقا. 

- خاصية font-size‏ : من خلالها نعطي قيمة لحجم النص سواء بالبكسل أو النسبة. 

- خاصية اسم font-family Bill‏ : ومن هنا نحدد اسم الخط المناسب للنص. 

- خاصية سمك الخط font-weight‏ : من هذه الخاصية نحدد سمك الخط سواء وتأخذ قيمة سواء نحيف او متين او نحدد قيمة بالبكسل ايضا. 


نقوم بعمل الخواص السابقة كاملة وتطبيقها على العنوان ونضع الكود في كلاس العنوان (title)‏ في ملف style.css‏ كما في الصورة التالية: 


.titlet 
padding:3px 3px 3px 3px; 
color:£F60; 
font-family:"Times New Roman", Times, serif; 
font-size:18px; 
font-weight :bold; 


لاحظ في الكود أعلاه وضعنا خصائص كلاس العنوان في السطر 5١‏ تم عمل خاصية اللون وحددنا الكود للون المراد عمله. في السطر 57 حددنا اسم 
الخط الذي نريده والمعروف Times New Roman-‏ في حالة عدم وجود هذا الخط سيقوم بتعيين الخط الذي بعد الفاصلة وهكذا. في السطر ev‏ 
حددنا خاصية حجم النص وعينا القيمة YA‏ بكسل. في السطر 4ه استخدمنا خاصية سمك الخط وحددنا bold‏ وهي قيمة لتعريض النص وهناك قيم 
أخرى مثل regular‏ أو italic‏ يمكنك تجريب القيم للخصائص السابقة. 

بعد التطبيق والحفظ للتغييرات ستظهر لنا النتيجة التالية : 


دورة المواقع والإعلام الإنكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة هي أرخبيل يمني مكون من أربع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي 350كم جنوب تبيه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وتبه الجزيرة 


( text shadow) خاصية الظل‎ 


إمكانية إضافة ميزات أخرى للنص ومنها الظل ويمكن إضافتها بالخاصية text-shadow‏ وسنضيفها في التطبيق السابق كالتالي : 


م 


.title( 
padding:3px 3px 3px 3px: 
color:£F60; 
font-family:"Times New Roman", Times, serif; 
font-size:22px; 
font-weight:bold; 
text-shadow:£000 Opx 2px; 
} 


(n &n b 


£n ی‎ 


0 
1 
2 
3 
4 
5 
6 


&n (n‏ كن 


كما في الكود أعلاه أعطينا كلاس العنوان خاصية الظل في السطر 5ه أعطينا اللون للظل وهو بالرمز السابق (اللون الاسود) والقيمة الاولى صفر 
بكسل للظل عموديا و بكسل للظل بالاتجاه الافقي. 


MOBILE: 00967 714490030 a 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


بعد التطبيق والحفظ للتغيرات ستكون النتيجة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة هي أرخبيل يمني مكون من أربع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي 350كم جنوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وتبه الجزيرة 
العربية قد خلّف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك في المستوى الاجتماعي لسكان 
الجزيرة 


ننتقل لعمل الخواص المناسبة للتفاصيل في كلاس (details)‏ في ملف style.css‏ كالتالي: 


[61] 


io cC 


.detailsí 
padding:3px 3px 3px 3px; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:12px; 
) 


5 
6 
6 


o‏ شر نم 


e 


كما في الكود اعلاه في السطر 55 خاصية المسافة بين النص والديف أو المحتوى واطراف الصندوق وحددنا لجميع الاتجاهات مسافة بمقدار “بكسل. 
في السطر ٠١‏ وضعنا خاصية اسم BAN‏ او نوعه وحددنا (tahoma)‏ وهو اكثر الخطوط شهرة وتوفر في جميع المتصفحات. في السطر "١‏ تم تعيين 
حجم الخط وتحديد ١١‏ بكسل. 


وبعد التطبيق والحفظ ستكون النتيجة كالتالي: 


media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


cS‏ وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأقريقي 5350م جيهب شبه الجزيرة [lont‏ . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة 
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خصائص الصورة 
ننتقل لعمل خصائص مناسبة للصورة في الصفحة التي نطبق عليها ونحدد القيم المناسبة للخواص التي سنستخدمها. في البداية نختار الصورة المناسبة 
ونضعها في مجلد خاص ونسميه مثلا: img‏ ضمن المجلدات الخاصة بالتطبيق كما في الصورة. 


E b- TT c index.html 
à è Chrome HTML Document 
3 File folder R File folder 136 KB 


KA style.css 
B Cascading Style Sheet Document 


1.01 KB 


لدينا صورة واسمها (yemenl.jpg)‏ وضعناها في المجلد img‏ . ننتقل الان الى الديف الخاص بالصورة ونضع كود الصورة. كما في الشكل التالي: 


«div class-"imgdiv"» 
«img src-"img/yemen1.jpg" /» 
«/div» 


في السطر ۳۷ أضفنا كود الصورة وحددنا مكانها من المجلد الذي انشأناه والصورة التي نريد وضعها. وبعد التطبيق والحفظ ستكون النتيجة كما في 
الشكل التالي: 


media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى Qus‏ 
سقطرى وتكتب أيضا سقطراء أو س à‏ 
JUS‏ سواحل القرن الأفريقى 5350م + 
الحزيرة العربية قد خلف مستوى فريد و 
الاجتماعى لسكان الجزيرة 


نلاحظ كما في الشكل أعلاه أن الصورة تم ظهورها بشكل طبيعي ولأن الصورة تحمل حجم ومقاسات معينه لابد من وضع خصائص للصورة ضمن الديف 
التي تحويه علما أن الديف التي فيه الصورة لا يتدخل نهائيا في حجمها. والمطلوب عمله الان وضع كلاس معين خاص بالصورة نضع فيه المقاسات 
والخصائص التي نريدها. 
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نقوم الان بعمل كلاس للصورة في ملف style.css‏ ونسميه مثلا img]‏ . ونضع فيه خاصية المقاسات أولا وسيكون بالشكل التالي ; 


. 17261 
height:110px; 
width:190px;! 


كما في الكود أعلاه حددنا الطول ٠١١‏ بكسل والعرض ١1١‏ بكسل ويمكنك عمل المقاسات التي تريدها. لكن هنا ملاحظة مستقبلا يمكنك عمل قيمة 
0 للطول لتظهر الصورة بشكلها الطبيعي وان لا تكون ممطوطة حسب مقاس معين. 


نأتي الان لربط الكلاس بالصورة في ملف index.html]‏ كما في الشكل التالي: 


«div class-"imgdiv"» 
«img src-"img/yemenl.jpg" class-"imgi" /> 
«/div» 


لك 


0 CD 


3 
3 
38 
3 
4 


o 


</div> 


كما تلاحظ في السطر Y V.‏ تم ربط الصورة بالكلاس الخاص بها (img T)‏ بعد التطبيق والحفظ للتغييرات سيكون لدينا الشكل التالي: 


media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة 


خاصية حدة الحواف (Border-radius)‏ 
كما تلاحظ الصورة ظهرت زواياها حادة ولأكثر تنسيقا ومظهرا نقوم بعمل تحديد لزوايا الصورة وجعلها ملتوية نوعا ما. نقوم بعمل الكود التالي: 


n 


.imgit 
height:110px; 
width: 190px; 
border-radius:6px 6px 6px 6px; 
margin:2px 2px 6px 2px;! 


Ce O 
ل‎ 


[^1] 


6 
6 


9 
0 


لاحظ في السطر 58 قمنا بعمل خاصية الحواف وحددنا مقدار التواء الزوايا ٠‏ بكسل لجميع الزوايا. في السطر 55 اضفنا كود لعمل ازاحة او بعد 
للصورة من كما في الشكل اعلاه من الاعلى Y‏ بكسل اليمين ۲ بكسل الاسفل 5 بكسل اليسار ۲ بكسل. 
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وقبل رؤية شكل الصفحة سنضيف بعض الاكواد في الديف الخاص بالصورة والديف الخاص بالنص كما في الشكل التالي : 


.imgdiví 
width:190px; 
margin:2px 2px 6px 2px; 
} 


.textt 
width:580px; 
border:1px solid 4560: 
float:right; 
direction:rtl; 
margin:8px 4px 2px 2px; 


لاحظ في السطر Y4‏ اضفنا خاصية margin‏ وهي خاصية كما ذكرنا سابقا تساعد على عمل ازاحة للديف او الصور لأي اتجاه نحدده وهنا حددنا ازاحة 
للديف او الصندوق الذي يحوي الصورة من أعلى بمقدار ۲ بكسل ومن اليمين بمقدار ۲ بكسل ومن الاسفل بمقدار T‏ بكسل ومن اليسار ۲ بكسل. 


في السطر 417 وضعنا خاصية الازاحة للديف التابع للنص كامل وبقيم مختلفة كما تلاحظ. بعد التطبيق والحفظ سيكون الموقع بالشكل التالي: 


media 


8)93 المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكنب أيضا سقطراء أو سقطرة gl‏ سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد cil‏ مستوى فريد وغير مألوق من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى 

ce clos VI‏ لسكان الحزيرة 


كما تلاحظ الشكل الناتج من التعديلات والاكواد المضافة يمكنك التعديل في القيم ورؤية الفرق وكيفية نتائجها. إضافة رابط ضمن النص وخصائصه : 
يمكننا إضافة رابط ضمن النص له خواصه المعينة نقوم بعمل رابط (تفاصل أكثر ..) ضمن النص او آخره كما في الشكل التالي : 


وغير à ddla‏ الاستيطان !552 على الجزيرة» Ads,‏ قي المستوى Laasti‏ قي ijoja ösa‏ 


«a href="#"> pasi تقاصيل‎ ..>/3< 


Oo‏ فز نزخ یں ظر 


</div> 
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3 
5 
3 
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3 
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كما تلاحظ أعلاه أضفنا رابط في نهاية النص لقراءة المزيد حول الموضوع ولم نحدد الاتجاه بعد فقط موقتا وضعنا علمة هاش (H)‏ في الرابط وسيكون 
شكله في التطبيق كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


وتكتب أيضا سقطراء ء أو سقطرة أو سوقطرة: هی أرخبيل يمتى مكون من Í‏ أربع جزر على المحيط الهندي 


nasl لسکان الجزيرة تفاصل‎ mr 


Bay‏ 5 253 الرابط في نهاية النص (تفاصيل أكثر..) ظهر الرابط باللون الازرق وهو اللون الافتراضي للروابط. نرد أن نضع بعض الميزات للرابط 
ومنها: عند وضع مؤشر الفأرة يتم تحول اللون من الازرق الى الأحمر أيضا نريد التعرف على خاصية ازالة الخط من اسفل الرابط في حالة اردنا ذلك او 
انه يبقى في وضعه العادي ويختفي عند التأشير والعكس. 


الطريقة : طبعا هنا لا نقوم بعمل كلاس جديد للرابط ولكن نقوم بإضافة كلاس فرعي لكلاس التفاصيل وهنا تأتي حرفية ودقة لغة CSS-I‏ ويعني ان نقوم 
بعمل كود يخبر المتصفح بأن يقوم بعمل لون محدد لرابط داخل الكلاس الفلاني. 


لاحظ أن الرابط موجود داخل الديف (details)‏ لذلك الكلاس الذي سننشئه سيكون متفرع من هذا الديف. في البداية نقوم بعمل لون محدد للرابط وليكن 
الاصفر او أي لون كمثال سيكون الكود كالشكل التالي: 
.details 4‏ 


color:£09F; 
text-decoration:none;! 


Bay‏ أعلاه اخذنا اسم الكلاس (details)‏ ثم وضعنا اسم الرابط (a)‏ وهو اسم عام لأي رابط في اي كلاس. وتعني تعبيريا الروابط التي في الكلاس 
details‏ في السطر ۷۳ قمنا بتحديد لون معين لأي رابط داخل الديف أعلاه. في السطر Vf‏ اضفنا خاصية جديدة وهي ipali‏ الخطوط التي تحت 
الروابط text-decoration‏ وتعني Bill‏ تحت النص او الرابط وأعطيناها القيمة none‏ والتي تعني لاء والتي تعني لا تضع خط تحت الرابط وسيكون 
الشكل بعد التطبيق والحفظ كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


كما لاحظت أعلاه رابط (تفاصيل أكثر..) تم تغيير لونه بالإضافة الى ازالة الخط الذي كان تحته. ولكن عند التأشير عليه لا يحدث اي شي. سنقوم الان 
بعمل لون محدد واضافة خط تحت الرابط في حالة التأشير على الرابط بالماوس. والحل نقوم بعمل كلاس فرعي آخر بنفس الطريقة السابقة والتي تخبر 
المتصفح بأن اللينك في الديف الفلاني عند التأشير عليه ظهر الخصائص الفلانية والكود سيكون كما بالشكل التالي: 
624 06683115 . 
color:£F60;‏ 


text-decoration:underline; 
} 
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كما تلاحظ أعلاه في السطر 77 اضفنا الكلاس الفرعي a:hover‏ ضمن الكلاس details‏ والتي تعني الروابط في الديف details‏ عند التأشير عليها. 
في السطر VA‏ أضفنا اللون الذي نريده. في السطر VÀ‏ اضفنا خاصية الخط تحت الرابط وهو الظهور للخط وأعطيناه القيمة underline‏ وتعني الخط 
السفلي. جرب هناك e‏ أخرى مثل line-through‏ وغيرها يمكنك تجربتها خلال برنامج -Dreamweaver-l‏ 


بعد التطبيق والحفظ سيكون الشكل للرابط والتأشير عليه كما في الصورة : 


* L4 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن‎ 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي‎ 
قبالة سواحل القرن الأفريقى 0کم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه‎ 
الجزيرة العربية قد خلف مستوى فريد 1425 مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى‎ 


الاجتماعى لسكان الجزيرة تفاصا , أكثر., 


كما تلاحظ أعلاه يتغير اللون عند التأشير على الرابط. 


خاصية التعليق (comment)‏ 


في برمجة المواقع تحتاج أحيانا بعد أو أثناء البرمجة وانشاء المواقع لعمل تعديلات وعودة للاكواد السابقة ومن باب الترتيب والتوثيق يمكنك إضافة 
تعليق ضمن الاكواد تشرح لم هذا الكود أو ذاك دون أن يؤثر على الكود الحقيقي أي أنه لا يحسب كود لأنه تعليق فقط. سنقوم بعمل تعليق كمثال لملف 
index.html‏ وملف الووع.516 . 


كما في الصورة التالية : 


J 


«div class-"menu"» انقائمة‎ Lia </div> 


O i م‎ 


«div class-"content"» 
«div class-"text"» 


1 
1 
1 
2 
2 
2 


N مر‎ 


أضفنا تعليق ضمن ملف index.html‏ والتعليق يضاف ما بين الحواصر أعلاه. 


ايضا الصورة التالية: 


.details 34 
color:£09F; 
text-decoration:none;! 


كما في الصورة اعلاه نضع اي تعليق داخل الحاصرتين أو الرمزين أعلاه بنفس التنسيق وبأي تعليق تريده. 
ملئ صفحة الموقع 


قبل البدء بتطبيق بالخواص التالية سنقوم بمليء الصفحة بنفس النص والصورة الموجودة ( نسخ ولصق ). كما في الصورة التالية: 
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21 <div class-"content"» 
Class-"text"» 


class-" d - سقطرى حمال الطبيعة والسياحة‎ 8)5j2X/div» 


امن أريع جزر على المحيط الهتدي قيالة صواحل القرن الأقريقي كم 
جتوب شبه الجزيرة العريية[1]. إن اتعزال الجزيرة_الطويل_ عن أقريقيا 
وشيه الجزيرة العريية قد dis‏ مستوى قريد 
الجزيرة» وكذلك قي المستوى الاجتماعي لسكان الجزيرة 


<2/>.. تقاصيل أكثر<"4"-2ع2ط ka‏ 


w € w 
Qu U 


w w Q 
O ك‎ 5 


39 Kdiv class-"imgdiv"» 

40 «img src-"img/yemen1.jpg" class-"img1" /» 
41 </div> 

42 = 

43 

44 


45 </div> 


سنقوم بنسخ المحتوى مرتين ليصيح مكرر Y‏ مرات ويمكنك في تطبيقك عمل بيانات أخرى افتراضية وسيصبح الموقع كما في الشكل التالي: 


media 


دورة المواقع والإعلام الإلكتروني 


القان 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكنب أيضا سقطراء أو سقطرة أو سوقطرة. هی أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الحزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة» وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطری وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هی أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على Sajal‏ > وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تقاصيل اكثر.. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتنب أيضا سقطراء أو سقطرة أو سوقطرةء FT‏ ی أرخبيل يمتى مكون من اربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


لاحظ كيف قمنا بنسخ كود معين من بداية الديف الخاص بالنص والصور داخل ديف المحتوى يجب ان تتنبه هنا الى كيفية النسخة ومكان النسخ للديفات 


وعدم إخراج ديف معين عن الديف العام. 
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(Menus) القوائم‎ 


تعتبر القوائم من أهم العناصر في تكوين المواقع الالكترونية من حيث تصميم الشكل والمحتوى. فالقائمة تعتبر خارطة الموقع بالنسبة للمتصفح وعن 
طريقها يصل المتصفح للموقع لما يريده داخل أي موقع فدائما نركز على تصميم القائمة شكلا ومحتوى. تعلمنا مسبقا كيفية عمل (list)‏ بمعني قائمة. 
هنا القائمة التي نريد عملها وتعلمها ليست كالتالي تعلمناها مسبقا ولكنها منبثقة منها ومطورة بشكل أكبر. 


مثال للقائمة التي تعلمناها مسبقا: 


«ul» 

<li><a href="#"> a lə></a>x</li> 
<li><a href="#"> :</a></li> 
<li><a href="#"> </a></li> 


</ul> 


Bay‏ القائمة أعلاه. مشابهة للقائمة السابقة لكن أضفنا لهنا هنا كود الرابط. سنقوم بعمل قائمة جميلة وبمظهر رائع لموقعنا وسنستخدم الكود أعلاه 
لبناء قائمة احترافية. وسنبدأ بالخطوات أول بأولء في البداية ننتقل للديف الخاص بالقائمة (menu)‏ في التطبيق الخاص بنا. 


نقوم بعمل قائمة فيها العناصر (الرئيسية — مشاريعنا - أخبار - مشاركات - المرئيات — حول المؤسسة — اتصل بنا ). وسيكون شكلها كالتالي: 


«div classe"menu*» 

<ul> 

<li><a href="§">iıaı 5J </a></li> 
<li><a />مشاريعتنا<"#"-2عطط‎ 3<>/11< 
<li><a href="#">} LÍ </a></1i> 
<li><a href-"£"»35Ls,Lasc/a»«/li» 
<li><a href-"£"»35L.5;,4 Ji «/a»«/li» 
<li><a href-"£"»ia»5$aj| <3<>/11/>حول‎ 
<li><a href-"£"»Li5 اتصل‎ >/3<>/11< 
«/div» 


Oo ما‎ 


IS‏ نم يم يم 


1 
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قمنا بعمل قائمة في الديف الخاص بها في الموقع. بعد التطبيق والحفظ سيكون شكل المواقع كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأقريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 


كما تشاهد أعلاه تم إضافة القائمة في الجهة اليسرى للديف ومعظم محتوى القائمة ذهب للأسفل. قبل أي تعديل على القائمة وإضافة ميزات لها نقوم أولا 
بعمل (id)‏ للقائمة مشابه للكلاس كي نقوم بعمل جميع الخصائص للقائمة فيه وقد تعلمنا مسبقا ال10 .نقوم بإضافة (menu)‏ من نوع (id)‏ بجانب 
الكلاس (menu)‏ الذي أنشأناه سابقا سنستخدم الكلاس للخواص العامة وال(10) لخواص القائمة وسيكون بالشكل التالي: 
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قمنا بعمل (ig)-‏ الخاص بالقائمة وأسميناه menu‏ وإضافة رمز القائمة (ul)‏ المتفرع والتي تعني تعبيريا (القائمة الموجودة في الاي دي الفلاني ( كما 
في السطر ؟١7.سنضيف‏ أيضا خاصية الغاء علامة القائمة او النقطة عند كل عنصر عبر خاصية (list-style-type)‏ وسيكون الكود بالشكل التالي: 


"FEM menu uli 
23 list-style-type:none;]! 


كما تلاحظ في سطر Y Y‏ أضفنا خاصية نوع الاستايل للقائمة (list-style-type)‏ واخترنا القيمة none‏ والتي تعني لا أي بدون ستايل وسيتم الغاء Jai‏ 
العناصر للقائمة كما في الصورة التالية: 


A:‏ ب 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 


a. مث‎ ll ع‎ babli لاحنسدة‎ alisi ان‎ Mäel Aviall acinis ns ااقدث الأقديقه . 0كتكم‎ Elo s اا‎ 


لاحظ القائمة والنقاط التي كانت عليها تم الغائها. 


ننشأ الان آي دي متفرع من السابق خاص بعناصر القائمة (li)‏ وفيها سنقوم بعمل خاصية جديدة وهي (display)‏ وهذه الخاصية تقوم بعمل عرض 
القائمة ولها قيم عده منها أفقية inline‏ والتي سنضيفها الان لعرض القائمة بشكل أفقي. هنا شكل بياني سنستعين به لشرح هذه النقطة الهامة: 


- اللون الأخضر: هذا ليس له دخل بالقائمة وإنما هو صندوق او ديف يحمل أي دي أو كلاس ليستمد منها خصائصه من الوان وخطوط وما إلى 
ذلك وهنا في مثالنا هو نفس الديف الذي كنا كتبنا بداخله في بداية التطبيق (هنا القائمة). 

- اللون الرمادي: هي القائمة نفسها (ul)‏ ويمكن التعبير عنها كأنها سلسلة. 

- اللون الأصفر: وهي عناصر القائمة الرمادية ويمكن التعبير عنها بعناصر السلسلة. 


الان سنقوم بعمل الاي دي الذي سيحمل خصائص القائمة كليا الموجودة ضمن الديف الذي يحمل الاي دي menu‏ كما في الكود التالي: 
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menu ul{ 
list-style-type: none;} 
menu ul lit 
display:inline;! 
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.) والتي تعني تعبيريا (العناصر في القائمة في الاي دي الفلاني‎ (menu) والاي دي‎ (ul) متفرع من الاي دي‎ (li) وهي‎ (id) اضفنا‎ ۲١ السطر‎ Bay 
وبعد التطبيق سيظهر الموقع بالشكل التالي:‎ 


دورة المواقع والإعلام الإلكتروني 
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Bay‏ التغيير تم جعل عناصر القائمة أفقيا. نلاحظ أن القائمة أتت من اليسار لذا سنقوم بعمل خاصية الاتجاه للقائمة بأكملها. سنقوم بعمل خاصية الاتجاه 
في كلاس (.menu)‏ كما في الشكل: 


26 .menut 

27 margin-top:3px; 

28 border:£933 1px solid; 
29 width:800px; 

30 height:40px; 
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background-color:£FFC; 
direction:rtl; } 


1 
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to 


لاحظ في سطر ۳۲ تم إضافة الخاصية direction‏ لكلاس القائمة وسيكون شكل الموقع بعد التطبيق والحفظ كالتالي: 


دورة المواقع والإعلام الإلكتروني 


كما تلاحظ تم تغيير اتجاه القائمة من اليمين الى اليسار لأنها ضمن الديف (القائمة) التي يستمد خصائصه من الكلاس (menu)‏ 


الخطوة التالية سنقوم بإضافة خواص تعلمناها مسبقا وهي (خاصية مكان الخط (ازالة الخط من اسفل العناصر) — خاصية حجم الخط — خاصية تغيير 
لون الخط لروابط القائمة - تعيين الخط المناسب أيضا وحجمه ). 


ملاحظة (تذكر أن عناصر القائمة هي روابط وقد تعلمنا مسبقا التعامل مع الرابط لتغيير خصائصه عبر كلاس او اي دي متفرع من الديف الذي يحتويه 
وهو ما سنفعله الان في تعيين خصائص عناصر القائمة). 


لاحظ الكود أدناه أو الشكل: 


£menu ul lit 

display:inline;! 
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في السطر Y‏ أضفنا الاي دي للروابط المتفرع من عناصر القائمة ضمن المتفرع من القائمة الكلية والمتفرعة من الايدي الاصل او الصندوق نفسه. 


هنا يمكن التعبير بشكل آخر للسطر ۲١‏ (كأننا نقول امنح الروابط الموجودة في عناصر القائمة للقائمة الكلية في الصندوق او الايدي menu‏ الاصل هذه 
الخصائص). 

في السطر ۲۷ خاصية الخط ومكانة وضعنا قيمة none‏ والتي تعني بدون خط في السطر YA‏ عينا اللون» في السطر ۲۹ تعيين للخط وحددنا الاسم 
للخط المطلوب» في السطر ٠‏ حددنا حجم الخطء في السطر Y Y‏ حددنا عرض الخط واخترنا قيمة bold‏ والتي تعني عريض. 


بعد التطبيق والحفظ سيكون شكل الموقع او التطبيق كالتالي: 


دورة المواقع والإعلام الإلكتروني 


الرنيسية مشاريعنا أخيار مشاركات المرنيات حول المؤسسة اتصل يتا 
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كما في الشكل تم عمل التغييرات اللازمة والمحددة مسبقا في الكود. سنقوم الان بتحديد أطراف عناصر القائمة (li)‏ وسنضيف الكود او الخاصية الذي 
تعلمناها سابقا وهو الحواف او الاطراف (border)‏ كما في الكود التالي: 
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في السطر ۳۲ تم اضافة خاصية الحواف او الاطراف وتم تعيين اللون كما هو اعلاه وحددنا نوعه خط عادي والحجم ١‏ بكسل. بعد التطبيق والحفظ 
سيكون شكل الموقع كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن — 


لاحظ تم تحديد اطراف عناصر القائمة باللون الذي حددنا. نقوم الان بعمل خاصية اخرى تعلمناها مسبقا وهي المسافة بين الرابط او النص وطرف 
gos‏ بواسطة الخاصية (padding)‏ كما في الكود التالي: 
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في السطر YY‏ عينا قيم ۷بكسل لكل المسافات من جميع الاتجاهات. وسيكون شكل القائمة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


لاحظ القائمة وعناصرها زادت المسافة بين النصر وطرفها الخط الملون باللون الاصفر. ولكن هناك ماهو ملفات ايضا تم ازاحة القائمة الى الاسفل z JA‏ 

(d ~ 

اطار الديف او صندوق القائمة كما نراه فى ١‏ ة اعلاه وهنا سيتبادر الى اذهاننا بعض التعديلات وهى: ) جعل الطول بالنسبة للديف الذى يحوى 

وق في هي: ) d‏ يحوي 

القائمة £0 بكسل حسب احتياجنا - ايضا عمل مسافة بين القائمة وطرف الديف عموديا وافقيا ). وسيتم تطبيق ذلك في الاي دي للقائمة بالنسبة 
للمسافة بينها وبين الصندوق ككل والطول للصندوق الديف الخاص الذي يحوي القائمة (menu)‏ كما في الكود التالي: 
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في السطر ؛ Y‏ جعلنا المساقة بين القائمة وبين طرف الصندوق من أعلى يساوي ٠١‏ بكسل. وجعلنا المسافة بين القائمة والجانب الايمن سالب YY‏ 
بكسل وهو العكس طبعا اي ان يقترب من الطرف الايمن بمقدار ١‏ بكسل كما ستلاحظ الفرق بين النتيجة السابقة واللاحقة. 
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في الكود أعلاه وفي الكلاس menu‏ الذي يستمد صندوق القائمة خصائصه Aia‏ عدلنا الطول وجعلناه £o‏ بكسل. وبعد التطبيق والحفظ سيكون شكل 
الموقع كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقي 05350 جنوب شبه الجزيرة العربية[1], إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الجزيرةء وكذلك في المستوى 

e elo VI‏ لسكان الحزيرة تفاصيل اكثر.. 


نقوم بتعديل بسيط على عناصر القائمة على المسافة بين رابط او عنصر القائمة والجانبين الايمن والايسر بدلا من V‏ بكسل نضع ١8‏ بكسل. بعد التطبيق 
والحفظ سيكون شكل القائمة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


0 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأقريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك في المستوىك ? 
eol? Eja ecl seta‏ اکر nlt‏ هه 


سنقوم الان بإضافة خاصية أخرى تعلمناها مسبقا وهي تحديد حدة الزوايا وسنقوم بتطبيقها الان على روابط عناصر القائمة بحيث ستبدو زوايا غير 
حادة كما في الكود التالي: 
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كما تلاحظ في السطر .^ Y‏ أضفنا خاصية (border-radius)‏ في الاي دي (menu ul li a)‏ لروابط عناصر القائمة بمقدار © بكسل من جميع الزوايا. 
وبعد التطبيق والحفظ سيكون شكل في القائمة في الموقع كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط Supl‏ 
قبالة سواحل القرن الأفريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


لاحظ كيف تحولت روابط العناصر للقائمة الى زوايا ناعمة او ملتوية. سنقوم الان بتعديل لون الخط والخلفية لكل العناصر من نفس الاي دي الذي عدلنا 
عليه أعلاه سنضع لون للخط أبيض وخلفية برتقالية مع تغيير لون الخط الحواف من برتقالي إلى لون مختلف كما في الكود التالي: 
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كما تلاحظ أعلاه قمنا بتعديل اللون في السطر .YY‏ ولون الحدود أو (border)‏ في السطر 1 Y‏ حسب اللون اعلاه. أيضا أضفنا كود أو خاصية الخلفية 
في السطر 9" وحددنا اللون الذي نريده وسيكون شكل الموقع بعد التطبيق والحفظ كما في الصورة: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هی أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 50م جتوب شبه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء . وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


كما تلاحظ أعلاه تم تغيير لون خلفية روابد العناصر للقائمة أعلاه. سنقوم الان بإضافة لون لخلفية القائمة ونقصد هنا الديف (menu)‏ والذي يستمد 
خصائصه من الكلاس (.menu)‏ كما في الكود التالي: 
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كما تلاحظ أعلاه تم إضافة كود الخلفية (background-color)‏ وتعني تعيين لون كخلفية. قمنا بتحديد اللون الذي نریدہ کلاس (menu)‏ في السطر 
LEA‏ وسيكون شكل الموقع بعد التعديل والحفظ كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب Laf‏ سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
JUS‏ سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


لاحظ بعد كل خطوة نحصل على شكل رائع للقائمة من حيث التنسيق والالوان والشكل ولم ننته بعد. سنقوم الان بإضافة ميزة تعلمناها مسبقا وسنطبها 
الان ايضا ولكن مختلف نوعا ما وهي خاصية تغير اللون عند التأشير بمؤشر الفأرة على أحد عناصر القائمة. وهنا يجب علينا القيام بعمل أي دي آخر 
متفرع من روابط عناصر القائمة كما في الكود التالي: 


£menu ul li 24 
text-decoration:none; 
color:#fff; 
font-family:"Times New Roman", Times, serif; 
font-size:18px; 
font-weight:bold; 
border:£FOFOFO solid 1px; 
padding:7px 18px 7px 18px; 
border-radius:5px 5px 5px 5px; 
background-color: #EC7600; 

} 
#menu ul li a:hover( 
background-color: #FCO; } 


22 #menu ul{ 

23 list-style-type:none; 
24 margin-top: 12px; 

25 margin-right:-33px; 
26 1 

27 £menu ul lil 

28 display:inline; 
29 H 

30 
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لاحظ تفرع الاي دي للأكواد الخاصة بالقائمة وعناصرها وروابطها بشكل سلس ومتتابع. هنا أضفنا في السطر ١‏ الاي دي a:hover‏ وهو كود ثابت 
يضاف لأي ديف وهنا تعبيريا يمكننا تفسيره ( الروابط في عناصر القائمة الفلانية الموجودة في الاي دي الفلاني الذي هو menu‏ طبعا). 


وسيكون شكل عناصر القائمة او لونها عند التأشير عليها كما في الشكل . 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 350كم جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الجزيرةء وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


عند التأشير على أي عنصر في القائمة سيظهر اللون الذي حددناه كما في الشكل أعلاه. 


يمكنك عمل خلفية صورة مخرفة أو مصممة باللون الذي يحدده المصمم والذوق الذي يختاره على العناصر في الاي دي 
(menu ul li a)‏ أو الاي دي (menu ul) sÍ (menu ul li a:hover) sÍ (menu ul li)‏ أو كلاس (menu)‏ 


الخلفية الصورة في حالة وضعها نحددها على لون محدد ومقاس محدد وحجم خفيف وان لا تكون صورة كبيرة عن اللازم كي نحافظ على خفة الموقع 
وأن لا يثقل التحميل للموقع عند إطلاقه مستقبلا. 


يمكنك عمل اي خصائص تريدها لروابط العناصر في القائمة سواء الالوان او الظل او غيرها وكل ذلك يعتمد على الابداع والتفكير وليس التقيد بما 


خاصية الحركة (Marquee)‏ 


لموقع أكثر حرقة وجذاب سنضيف الان خاصية جديدة وهي النص المتحرك للموقع والخطوات كالتالي: 


- عمل ديف بنفس مقاسات الديف للقائمة وكلاس خاص به للخطوط والألوان والخلفيات. 


- إضافة الخاصية marquee‏ والنص الذي سيتحرك في الموقع. 
ويكون شكل الخاصية كالتالي: 


«MARQUEE WIDTH=100% BEHAVIOR-SCROLL DIRECTION-RIGHT BGColor-yellow^This is an 
example of a marquee scrolling to the right </MARQUEE> 


لاحظ الكود أعلاه خاص بخاصية النص المتحرك. اللون الأخضر هو للخاصية نفسها والأحمر قيم الخاصية أي نحدد فيها نوع الحركة (behavior)‏ 
والعرض (width)‏ واتجاه التحرك (direction)‏ ولون الخلفية (bgcolor)‏ اما النص الانجليزي بالأسود هو النص الذي سيتحرك وقد يكون بالعربي 


أو صور أو أي شيء تريد تحريكه داخل (marquee)‏ 


نقوم الان بعمل كلاس للديف الجديد للنص المتحرك بعد ديف القائمة وعمل الديف نفسه وربطه بالكلاس كما في الكود التالي: 


106 .marquee{ } 
107 


في السطر ٠١5‏ كما تلاحظ أعلاه عملنا كلاس وسميناه marquee‏ ونقوم الان بعمل الديف وربطه به كما في الكود التالي: 
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3t «div class-"marquee"»«/div» 


نقوم الان بإضافة الخاصية داخل الديف وبعض القيم كما في الكود التالي: 


30 <div class-"marquee"» 
ان‎ <MARQUEE width=100% behavior-scroll direction-right bgcolor-white»,34,1€$ M! دورة المواقع الالكترونية والإعلام الالكتروني والتسويق‎ </MARQUEE> 
32 </div> 


في السطر "١‏ أضفنا ديف وربطناه بالكلاس الخاص به في السطر ”١‏ وضعنا ipali‏ النص (marquee) daidi‏ أضفنها لها خصائص العرض 
٠١‏ السلوك وحددنا سكرول اي تحرك بخط مستقيم الاتجاه ايضا وحددنا يمين ثم كتبنا النص ثم أغلقنا الخاصية. 


سيكون شكل الموقع بعد التطبيق والحفظ كما في الصورة: 


دورة المواقع والإعلام الإلكتروني 


سقطرى وتكتب Lal‏ سقطراء أو سقطرة أو سوقطرة: هى أرخسا, يمتى مكون مء أربع جزر على, huoll‏ الهتدى 


كما تلاحظ سيكون لدينا نص متحرك في الموقع. وسنقوم الان بعمل بعض التعديلات لشكل أكثر تنسيقا من خلال الديف الذي توجد فيه خاصية 
marquee-!!‏ من خلال الكلاس الخاص به الذي انشأنها وسنقوم بإضافة التالي: 


- لون النص والخط والعرض. 
- طول الديف وعرضه. 
- الحواف او الاطراق تحديدها بلون معين بالإضافة الى زوايا ملتوية. 


نأتي للتطبيق وسيكون شكل الكود كالتالي: 


. 1122116 © 4 
color:£F60; 
font-family:"Times New Roman", Times, serif; 
font-size:18px; 
font-weight:bold; 
border:solid £F60 1px; 
border-radius:4px 4px 4px 4px; 
height: 30px; 
margin-top: 2px; 
} 


قمنا بعمل الكود اللازم تنسيق الديف الذي فيه النص المتحرك بالإضافة الى خصائص النص نفسه. في السطر ١٠١1‏ اضفنا اللون» في السطر ٠١۸‏ حددنا 
اسم الخط المطلوب» في السطر ١٠١5‏ حددنا حجم الخط A‏ بكسلء في السطر ١١١‏ حددنا الخط يكون عريض في السطر ١١١‏ حددنا الحواف او الاطراف 
بشكل خطي وبلون محدد اعلاه بمقدار ١بكسلء‏ في السطر ١١١‏ حددنا مقدار حدة زوايا الديف بمقدار £ بكسل لكل الزواياء في السطر ١١”‏ حددنا 
ارتفاع الديف "١‏ بكسلء حددنا مسافة معينة من اعلى أو بعد Y‏ بكسل. 


بعد التطبيق أعلاه والحفظ سيكون الموضع بالشكل التالي: 
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دورة المواقع والإعلام الإلكتروني 


is‏ المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن | 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء ھی أرخبيل د يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 5350 جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الحزيرةء وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0کم جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء > وكذلك فى المستوىك 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة acd‏ 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هی أرخبيل د يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 5350م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


خاصية الخلفيات (Background)‏ 


من أهم الخصائص في تصميم المواقع الالكترونية هي الخلفيات لأن الموقع في يهتم بالمظهر ولأن الخلفية تغطي مساحة كبيرة في الموقع بالنسبة 
للخلفية العامة للموقع أو خلفيات الأجزاء داخل الموقع الإلكتروني. سنقوم الأن بعمل خلفية للموقع كاملاء نقوم بإيجاد خلفية مناسبة وهنا ملاحظات فنية 
يجب التنبيه لها وهي : 

- نحاول قدر الامكان بأن يكون لون الخلفية مناسب لألوان الموقع ككل. 

- يفضل أن تكون الخلفية لون محدد من أجل الحفاظ على الموقع خفيف التصفح. 

- إذاتم عمل صورة كخلفية تصغير حجمها قدر الامكان. 


لدينا صور كخلفيات سنستخدمها كخلفية للموقع كل خلفية لها خصائص وقيم معينة حسب رغبتنا : 


- 


- bgljpg -— bg2.jpg 


كما تلاحظ أعلاه أنشأنا مجلد جديد أسميناه bg‏ ووضعنا فيه الصور الخاصة التي سنقوم بتعيينها كخلفيات وهن كالتالي: 


(bgl.jpg) 5‏ خلفية ومقاساتها ل Es‏ و وغ بكسل). 
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(bg2.jpg) -‏ خلفية ومقاساتها MARY. YE)‏ بكسل). 
(bgd.png) -‏ خلفية ومقاساتها ٠۰۰*۲۹(‏ بكسل). 


نقوم بعمل الخلفية للصورة الأولى وسيكون ذلك بداية بعمل كلاس (body)‏ بدون نقطة ضمن ملف الوو716.0] في بداية الكلاسات وهنا ملاحظة وهي 
اننا لن نضع نقطه امام الكلاس كما ستلاحظ لأن كلمة (body)‏ بدون نقطة كلمة محجوزة ضمن البرمجة في الووح لذلك نضعهما كما هي مع القوسين 
الذين سيحويان الخصائص وكما في الصورة التالية للكود: 


EE Dodyt 
5 background-image:url (bg/bg1.jpg) EE 


كما في السطر © أضفنا خاصية خلفية بتعيين صورة وحددنا مكانها بواسطة برنامج الدريف ويفر. وسيكون شكل الموقع بعد التطبيق والحفظ كالتالي: 


mie 7 D 


دورة المواقع والإعلام الإلكتروني 


دورة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني 


أجزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء s‏ أو سقطرة أو سوقطرة: هی أرخبيل ي يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن إلأفريقى 50م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر, 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 0م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهتدي 
قبالة سواخل القرت الأفريقى 0م جنوب شبه الجزيرة m‏ . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العزبية قد خلف مستوى فربد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك قى المستوى 
الاجتماعي لسكان الجزيرة تفاصيل أكثر.. 


كما تلاحظ أعلاه تم تعيين الخلفية على جميع انحاء الموقع (body)‏ وهنا يجب ان نلاحظ ان الخلفية التي قمنا بتعيينها لها مقاس صغير ولكن بشكل 
اتوماتيكي يتم تكرارها في جميع النواحي في الخلفيات القادمة سنضيف قيم مختلفة للخلفية. 


نأتي لتطبيق الخلفية رقم Y‏ وسيكون الكود بالشكل التالي: 


لع 0 4 
: (329 . 2وط/وط) background-image:url‏ 5 


كما تلاحظ اعلاه تم تعيين الخلفية رقم Y‏ وسيكون شكل الموقع كالتالي: 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمنى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة رة العربية[1]. إن اتعزال الجزيرة الطوبل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطری وتكتب Laf‏ سقطراء أو سقطرة أو سوقطرة. «d;‏ هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأقريقي 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
a M tuc‏ جلف سوك EE N ED E‏ الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر 


الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


كما تلاحظ الشكل أعلاه تم تعيين الخلفية على الموقع كاملا ونلاحظ هنا ان الخلفية تكررت أي الصورة ومن المنطق لمثل هذه الصورة أن لا تتكرر 
ولمعالجة ذلك نقوم بإضافة خواص جديدة. 


خواص الخلفية (Background-position - Background-repeat)‏ 
لتعديل ماسبق من سنضيف بعض الخواص ضمن التعديلات التي نريدها وهي : 


- تكبير حجم الصورة طول والعرض بما يتناسب مع الموقع كاملا. 
- اضافة قيمة او خاصية ضمن كود الخلفية لجعلها baal g‏ فقط وبدون تكرار. 
SS Š‏ 


نقوم بإضافة الأكواد وسيكون كالتالي: 


bodyt 
background-color:£a6a49c; 
background-image:url (bg/bg2.jpg): 
background-position:top:; 
background-repeat:no-repeat;! 


في السطر ه٠‏ تم تعيين لون خلف الخلفيةء في السطر ٠“‏ تعيين الصورة كخلفيةء في السطر سبعة أضفنا خاصية (background-position)‏ وتعني 
مكان الخلفية ولها e$‏ منها(:رءع]2ع00-0)) واخترنا هنا قيمة top‏ وتعني اعلى» اضفنا ايضا في السطر ^ خاصية (Background-repeat)‏ وتعني 
J| Si‏ الخلفية ولها قيم منها (no-repeat)‏ وتعني لا تتكرر وقيم أخرى مثل (repeat-x)‏ وتعني تكرار افقي (repeat-y).‏ وتعني تكرار عمودي فقط 
وسنتعلمها ايضا في الخلفية الثالثة. 


بعد تطبيق الكود أعلاه والحفظ سيكون شكل الموقع كالتالي: 


MOBILE: 00967 714490030 M POL 
MOBILE 2: 00967 772755202 Email: infoetechpio.net i 0 


media 


دورة المواقع والإعلام الإلكتروني 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هی أرخبيل ي يمتى مكون من gol‏ جر على المحيط الهتذي 
قبالة سواحل القرن الأفريقى 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك قى المستوى 

|| الاجتماعي لسكان الجزيرة تفاصيل أكثر.. 


^ إن اتعزال الجزيرة الطويل عن أفريقيا وشبه‎ . "aon سواحل القر يقي كم جنوب شبه الجزيرة‎ m 
الجزيرة العربية قد خلف مستوى قريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى‎ 
الاجتماعى لسكان الجزيرة تفاصيل أكثر..‎ 


جت شبه الجزيرة s‏ . إن العزال الجزيرة الطويل عن أفريقيا وشبه 7 
العربي مستوى 9 5 مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكتر.. 


كما تلاحظ اعلاه تم ادراج خلفية بعد تكبير حجمها ولكن هناك مسألة أخرى يجدر التنبيه لها بالإضافة الى ان الخلفيات الكبيرة تؤثر على سرعة تصفح 


الموقع لدي ذوي السرعة المحدودة ايضا ان عرض وطول الشاشات للمتصفحين تختلف من جهاز لأخر لذلك دائما يفضل عمل الخلفيات الصغيرة 
الموحدة. 


إضافة الخلفية الثالثة سنقوم بالتعديل على الكود وسيكون كالتالي: 


background-image:url (bg/bg4.png) 
background-repeat:repeat-x 


في الكود أعلاه في السطر o‏ عينا الخلفية المطلوبةء في السطر ٠‏ اضفنا خاصية تكرار الخلفية واخترنا القيمة (repeat-x)‏ وتعني تكرار افقي فقط. 


وسيكون شكل الموقع كالتالي: 


e- dia 


دورة المواقع والإعلام الإلكتروني 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من gol‏ جزر على المحيط الهندي 
قبالة سواحل القرن الأقريقى p$350‏ جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك قى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


سقطری وتكتب Laf‏ سقطراء أو سقطرة أو سوقطرة: هی أرخبيل ي يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأقريقى 350كم جتوب شبه الجزيرة الحربية [1]. إن . إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الجزيرة العربية قد خلف مستوی قريد 3459 مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر., 


جزيرة سقطرى جمال الطبيعة والسياحة - البمن 


سقطری وتكتب Laf‏ سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أريع yy»‏ على المحيط الهتدي 
JUS.‏ سواحل القرن الأقريقى 350كم جتوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 
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إضافة الفوتر (الجزء السفلي للموقع): 
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نقوم بإضافة sja‏ أسفل الموقع وفي نضع روابط وحقوق الموقع واي شيء يمكن وضعه هناك وسنقوم Alan;‏ بما تعلمناه سابقا من روابط وديف 
وكلاسات وسنقوم بالاتي: 


- عمل كلاس للفوتر. 

- عمل ديف وربطه بالكلاس. 

- اضافة روابط, 

- تعديل لون الروابط والخلفية للديف وسيكون الكود كما في الشكل التالي: 


.fotert 
background-color:£F4F4F4; 
font-family:Tahoma, Geneva, sans-serif; 
text-align:center; 
font-size:12px;: 
border:solid #999 1px; 
border-radius: 3px 3px 3px 3px; 
margin-top:2px; 
} 


د 
cc‏ 


1 
1 
1 
1 
1 
1 
1 
1 
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قمنا بإنشاء الكود أعلاه. في السطر YY Y‏ تم انشاء الكلاس للفوتر وسميناه (rA (foter)‏ السطر ١١‏ تم اضافة لون للخلفية الخاصة بالفوتر» في 
السطر ١١54‏ تم تحديد الخط المراد» في السطر ١١5‏ خاصية تحديد مكان النص وحددنا بأن يكون اي نص في الوسطء في السطر ١75‏ تحديد حجم 
الخطء في السطر ١١17‏ تم تحديد حواف الديف» في السطر Y YA‏ تم تحديد مرونة زوايا الديف» في السطر Y‏ 1 اضفنا خاصية البعد من أعلى بمقدار ۲ 
بكسل. 


«div class-"foter"» 
<a href-"£"»Li5 <ة/>اتصل‎ | 
«a href-"£"»5a5 <ة/>من‎ | 
<a href-"£"»&3,a j| <2/>خارطة‎ 
«/br» 
«span»&3!4a j| />جميع الحقوق محقوظة لدورة تعليم‎ 5232< 
«/div» 
«/div» 


Jii‏ لصفحة index.html‏ وكما تشاهد اعلاه اضفنا الديف قبل نهاية الديف العام الذي يحتوي الديفات كاملة. في السطر ٠١١‏ تم اضافة الديف وربطه 
بالكلاس فوتر الذي انشأناه »في السطر ٠١7‏ و”١٠و4١٠‏ اضفنا روابط ووضعنا # ولم نحدد إلى اين فقط للتمثيل ويمكنك تحديد الصفحات بنفسك» في 
السطر ٠١5‏ اضفنا كود الانتقال لسطر آخرء في السطر ٠١"‏ اضفنا نص الحقوق بواسطة (span)‏ في السطر ٠١7‏ اغلقنا الديف. 


بعد التطبيق والحفظ سيكون شكل الموقع كالتالي: 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمني مكون من go)‏ جزر على المحيط الهندي قبالة 

سواحل القرن الأقريقى 350كم جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه الجزيرة 

العربية قد خلّف مستوى 359 وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك فى المستوى الاجتماعي لسكات "- 


الجزيرة تفاصيل أكثر.. 


اتصا, ينا | من تحن | خارطة الموقع 
m‏ جميع الحقوق محفوظة لدورة تعليم المواقع 


+ * 


خاصية الشفافية (opacity)‏ 


خاصية الشفافية او العناصر الشفافة تعتبر من الميزات الجميلة تضيف للموقع نوع من الشكل الجذاب وهي تحدد شفافية الصور والخلفية وغيرها هنا 
سنقوم بتطبيقها في ديف النص المتحرك وسنقوم بعمل التالي: 


- في كلاس (marquee)‏ نضع خلفية بيضاء. 
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- نضيف خاصية (opacity)‏ ضمن الكلاس السابق ونحدد القيمة المناسبة للشفافية. 
سيكون الكود كما في الشكل: 


.marquee{ 
background-color: #fff; 
opacity:0.5; 
color:£F60; 


كما Bast‏ الكود أعلاه في السطر Y Y‏ 1 تم عمل الخلفية اللون الابيضء في السطر تم اضافة خاصية الشفافية وقيمتها (0.5). يمكنك تغيير القيمة 
وملاحظة التغييرات. وسيكون شكل الموقع كالتالي: 


media 


دورة المواقع والإعلام الإلكتروني 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء s‏ أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 350كم جتوب شيه الجزيرة العربية[1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب Lajl‏ سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من اربع جزر على المحيط الهندي 
قبالة سواحل القرن أفريقى 350كم جتوب شبه الجزيرة العربية [1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد مستوى 19 وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب Laf‏ سقطراء أو سقطرة أو سوقطرةء هی أرخبيل ي يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 350كم جنوب شبه الجزيرة العربية [1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


اضافة الخطوط 
بالإضافة للخطوط الموجودة والمعروفة والمدعومة في المتصفحات يمكننا ايضا اضافة خطوط حسب الرغبة للموقع الالكتروني وهنا سنتعلم كيفية 
اضافة الخطوط لصفحة الموقع بواسطة CSS-‏ 


بداية نقوم بعمل مجلد جديد وليكن (fonts)‏ وسيكون في داخل المجلد ملفين (font.html)‏ وملف (font.css)‏ . ولدينا الخطوط التي نريد اضافتها 
للموقع في مجلد اسميناه (fonts)‏ كما في الصورة صور الملفات كاملة: 


Name Date modified Type Size 

fonts Y-M/.o/Yla|YY File folder‏ لال 

9. font Y+1£/+0/Y\ 1757م‎ Cascading Style S... 1 KB 
© font Y+)£/+0/Y) a \Y:£f Chrome HTML Do... 1KB 


الخطوط داخل مجلد :(fonts)‏ 
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Name Date modified Type Size 

|_| Arajozoor-Regular.eot 11 اام اليه‎ EOT File 76 KB 
|_| Aralozoor-Regular.woff Y«YY/Y«/YY a YY:TA WOFF File 49 KB 
A | fontmenu ۲۰1۳/۰0/۲۰ ص‎ °: OpenType font file 162 KB 
a | fontmenu 7١17/6/7١ 4ء ص‎ TrueType font file 80 KB 
^ text YAYY/«YYY AES t TrueType font file 359 KB 
A title LEART EATARE DES t TrueType font file 375 KB 


لإضافة الكود الخاص بإضافة خط كما في الكود في ملف :(font.css)‏ 


Gcharset "utf-8"; 


* CSS Document */ 
Gfont-face ( 
font-family: "myfont"; 


src:url(fonts/fontmenu.otf); 
src:url(fonts/fontmenu.ttf); 


1 
4 
5 
6 


) 

Gfont-face ( 
font-family: "title"; 
src:url(fonts/title.ttf); 


) 
Gfont-face ( 
font-family: "text"; 
1 src:url(fonts/text.ttf): 
17 ) 
ME Gront-face ( 
19 font-family: "text2"; 
20 src:url(fonts/AraJozoor-Regular.eot) : 
21 src:url(fonts/AraJozoor-Regular.woff): 
22 } 
24 14 
25 font-family:"myfont"; 
26 font-size:20px;! 
28 .class2( 
29 font-family:"title"; 
30 font-size:20px;) 
31 
32 .class3( 
33 font-family:"text"; 
4 


font-size:12px;! 


) QD 


كما في الصورة أعلاه أضفنا الكود الخاص بإنشاء أو اضافة خط جديد للموقع واضفنا رابط لمكان الخط حيث @font-face‏ وهذا الكود عبارة عن 
rule‏ أي قاعدة معروفة لإضافة اي خط ومدعومة في كثير من المتصفحات مثل موزيلا فايرفوكس وجوجل كروم وسفاري واوبيرا وغيرها من 
المتصفحات 


في سطر o‏ نقوم بتعيين الاسم للخط حسب ما نريد. في سطري و“ نحدد السورس (src)‏ أي المكان الموجود فيها الخط. وبقية الأسطر نفس الفكرة 
الى سطر ۲۲. في الاسطر 74 الى 4" أنشانا كلاسات مختلفة وعينا في كل كلاس خط معين وسيتم تعيين كل كلاس لنص معين ايضا كما في صفحة 
(font.html)‏ وكما في الصورة: 
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<head> 

«meta http-equiv-"Content-Type" content="text/html; charset-utf-8" /» 
Xtitle»b,hs i 3Lal«/title» 

«link href-"font.css" rel="stylesheet" type="text/css" /» 

</head> 


<body> 
<div align="center"> 


«br /» 
«div class-"class1" style-"text-align:center"» <041/>رواد التكتولوجيا — دورة المواقع الالكتروتية‎ 
«br /< 
<div class-"class2" style-"text-align:center"» <041/>رواد التكتولوجيا — دورة المواقع الالكتروتية‎ 
<br /» 
«div class-"class3" style-"text-align:center"» 4.354,15 |! التكتولوجيا — دورة المواقع‎ 3l 4 «/div5 


«/div» 
</body> 
</html> 


Bay‏ لدينا Y‏ نصوص كل نص داخل ديف معين كل ديف أخذ كلاس مختلف وستكون النتيجة كما في الصورة: 


رواد التكنولوجيا - دورة المواقع الالكترونية 
رواد التكنولوجيا - دورة المواقع الالكترونية 


رواد العكنولوجيا - دورة المواقع الالكترونية 
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PHP& MYSQL 
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الباب الرابع MYSQL‏ ع PHP‏ 


مقدمة حول PHP‏ 

تعلمنا في الفصول السابقة ARI‏ هامة في تصميم المواقع الالكترونية وهي لغة (HTML)‏ طبعا قد يتبادر في ذهنك العديد من التساؤلات وانت تتعلم 
هذه اللغة الهامة وتتذكر أنك ترى مواقع اكثر تفاعلية مع الناس كمتصفحين ومع إداريين الموقع وقد تتساءل هل على مدير الموقع الالكتروني ان يقوم 
بتعديل كود (HTML)‏ داخل الموقع كي يضيف خبر معين وإذا اراد متصفح التفاعل مع الموقع والتعليق على شيء ماء داخل الموقع كيف سيكون ذلك 
تساؤلات كثيرة لا يمكننا إحصائها ومن سيجيب على هذه التساؤلات هو مؤلف لغة (PHP)‏ وهو (Rasmus Lerdorf)‏ والذي أنشأها في عام 
MIT‏ 


لغة (PHP)‏ حلت جميع التساؤلات السابقة يمكنك الان عمل لوحة تحكم يدوية للمستخدم العادي ليضيف الأخبار والمحتوى للموقع سواء النصوص 
والصور والفيديوهات وغيرها. لغة ديناميكية وركز على هذا الوصف (ديناميكية) أي تفاعليه Je i.‏ مع المستخدم وتخزن بياناتها في قاعدة بيانات 
(My Sql)‏ التي تستطيع لغة البي اتش بي التعامل والاتصال معها ولن تحتاج بعد الآن أن تقوم بالتعديل على الكود لتضيف نصوص للموقع مثل 
(HTML)‏ والتي توصف بال(ستاتييك) واحفظ هذا الوصف جيدا ايضا فهو الفرق بينها وبين PHP-‏ وتعني ستاتيك أنها جامدة أو ثابتة لا يستطيع 
سواء مدير الموقع او المتصفح التعديل فيها إلا عن طريق الكود مباشرة. 


يجدر الذكر هنا إلى أننا لن نستخدم PHP‏ فقط منفردة بل ندمجها مع HTMLA‏ لأنها الأساس سواء مع البي اتش بي أو غيرها. كما ننوه أنه في 
هذا الفصل سيكون شرح عملي وتطبيقات عملية لن يكون هناك كلام كثير حول البي اتش بي وبعض المحتويات فيها تحتاج لوقت كبير ولكن سيكون 
الشرح والتطبيق لما سنحتاجه في انشاء المواقع الالكتروني والتي سنطبقها في الحياة العملية. كما أن هذا الكتاب أنشئ أصلا من أجل تعلم نظام إدارة 
المحتوى جوملا والتعرف كيف تعمل المواقع في هذا النظام. وسنبدأ بالتدريج في تعلم البي اتش بي من الاساسيات الصغيرة الى الاساسيات الأكبر ثم 
التطبيقات التي نحتاجها. 


لغة البى اننش بی (PHP)‏ 

هي لغة برمجة لتطوير صفحات الويب وهي لغة مفتوحة المرصد (غير مملوكة لشركة) يطورها فريق من المتطوعون وصممت لتطوير وبرمجة 
تطبيقات وصفحات الويب. تعمل البي اتش بي على السرفرات الخاصة بملفات الويب وتقوم بتنفيذ جميع اوامرها من خلال الخادم او السرفر في 
المتصفحات والتفاعل مع البيانات ومخرجاتها. 


التركيب البرمجي أو النصي: 
لغة البي اتش بي تعمل من خلال تركيب معين وطريقة معينة في طرح الأوامر للخادم وتنفيذها عبر المتصفحات وهنا صورة عامة لكود بي اتش بي: 
<?php‏ 


;' أهلا بك في لغة البي اتش بي ' echo‏ 


?» 
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(PHP) متطلبات العمل على‎ 
.(wampserver) برنامج‎ -١ 
Dreamweaver CS6) برنامج‎ -Y 
( Mozilla Firefox . Google chrome ) متصفحات‎ -Y 


قبل البدء في تطبيقاتنا وتعلمنا على البي اتش بي نحتاج إلى أدوات التي سنطبق عليها هذه اللغة. طبعا كما ذكرنا ان البي اتش بي تعمل على خوادم او 
سرفرات ولذلك تم إيجاد سرفرات وهمية ضمن الجهاز العادي أو برامج يمكنك العمل عليها وكأنها سرفر لتقوم بعملك في البي اتش بي وكأنك تعمل على 
سرفر حقيقي لذلك سنحتاج لبرنامج سرفر مثل ( wamp server‏ أو xampp server‏ ( سنستخدم هنا wamp server‏ ولك حرية الاختيار من 
بينهما. إضافة الى الدريم ويفر (Dreamweaver CS6)‏ الذي استخدمناه سابقا وأحد المتصفحات ) Google chrome‏ أو «(Mozilla Firefox‏ 


السرفر المحلي وطريقة تركيبه (wamp server)‏ 


في البداية نقوم بالتأكد من نوع أو رقم النظام الخاص بنا بافتراض ان النظام الذي نعمل عليه هو ويندوز سفن )7 (Windows‏ لتنزل برنامج ( wamp‏ 
)) المناسب للنظام لأن لدينا نوعين bit)‏ 32( و bit)‏ 64( وذلك عن طريق الضغط بالفأرة بالزر اليمين على جهاز الكمبيوتر في سطح المكتب 


Control Panel » System and Security » System‏ م كار 


Control Panel Home 


Hj Device Manager Windows edition 


ij Remote settings Windows 7 Ultimate 
ij System protection 


Hy Advanced system settings Service Pack 1 


System 
Manufacturer: 
Model: 
Rating: 


Processor: 
Installed memory (RAM): 
System type: 


See aln Pen and Touch: 


Action Center 


Windows Update Sony Electronics Inc. support 


View basic information about your computer 


Copyright © 2009 Microsoft Corporation. All rights reserved. 


واختيار خصائص ستظهر النافذة كما في الصورة: 


Sony Electronics Inc. 
VAIO® Computer 


à Your Windows Experience Index needs to be 
Sia 
refreshed 


Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz 2.60 GHz 
6.00 GB (5.88 GB usable) 
64-bit Operating System 


O‏ الى 


No Pen or Touch Input is available for this Display 


(system type) BaY‏ ونلاحظ نوع النظام 54 بت. الان نذهب للموقع الخاص بالسرفر (wamp server)‏ على الرابط التالي: 
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/http://www.wampserver.com/en 


بعد الدخول على الرابط أعلاه في اسفل الموقع ستظهر لك الصفحة التالية : 


www.techpio.net 


WampServer‏ الي“ 


١ J Apache, PHP, MySQL on Windows START TRAINING FORUM 


WAMPSERVER 


Apache : 2.4.4 MySQL : 5.6.12 PHP : 5.4.16 PHPMyAdmin : 4.0.4 SqIBuddy : 1.3.3 Apache : 24.4 MySQL : 5.6.12 PHP : 5.4.12 PHPMyAdmin : 4.0.4 SqlBuddy : 1.3.3 
XDebug : 2.2.3 XDebug : 2.2.3 


Apache 2.2.22 — Mysql 5.5.24 — PHP 5.3.13 XDebug 2.1.2 XDC 1.5 PhpMyadmin Apache 2.4.2 — Mysql 5.5.24 — PHP 5.4.3 XDebug 2.1.2 XDC 1.5 PhpMyadmin 3.4.10.1 
3.4.10.1 SQLBuddy 1.3.3 webGrind 1.0 SQLBuddy 1.3.3 webGrind 1.0 


في الصورة أعلاه على آخر نسخة على اليسار في الأسفل نقوم بتنزيلها وهي (WAMPSERVER (64 BITS & PHP 5.3) 22E)‏ نقوم 
بالضغط عليها وستظهر الصورة التالية: 


WampServer est disponible gratuitement (sous licence GPL). Vous pouvez remplir ce formulaire qui nous permettra de vous faire parvenir les 
actualités formation d'Alter Way, société éditrice, ainsi que toutes les informations liées aux évolutions de WampServer. Si vous ne le souhaitez 
pas, vous pouvez you can download it directly 


WARNING : You must install Visual C++ 2010 SP1 Redistributable Package x86 or x64 
VC10 SP1 vcredist x86.exe 32 bits : http:/^ microsoft.com/download/en/details.aspx?id-8328 
VC10 SP1 vcredist x64 exe 64 bits : http microsoft.com/download/en/details.aspx?id-13523 


WARNING : Do not try to install WampServer 2 over WAMP5 
If WAMPS is installed on your computer, save your data, uninstall it and delete the WAMPS directory before installing WampServer 2 


WARNING : All the components of the v2.2 WampServer stack have been compiled with VC9 version of Microsoft compiler 
Earlier versions of Wampserver have been made with VC6 version of Microsoft compiler. 

So, You can't mix components of 2.2 stack with previous version of Wampserver Stack components 

If you do it you will get an instable Wampserver. 


نضغط على الرابط الذي باللون الاصفر في السطر الثالث (you can download it directly.)‏ وسيتم التنزيل مباشرة لجهازك. في حالة كان نوع 
نظام الجهاز الخاص بك ٠٤‏ بت قم بتنزيل النسخة DOWNLOAD WAMPSERVER (64 BITS & PHP 5.3) 2.2E)‏ 


تقوم بتنزيل البرنامج الى جهازك ثم تركيبه على الجهاز الخاص بك. بعد التركيب سيتم وضع ايقونة على سطح المكتب تحمل الصورة التالية او شعار 


:(wamp server )-! 
(W 
V) 


قم بتشغيل wamp server-!‏ ولاحظ الأيقونة الخاصة به في الشريط السفلي بجانب ايقونة الصوت وسترى في البداية يكون اللون بالأحمر وتعني بداية 
التشغيل واللون الاصفر تعني تشغيل السرفر بالنسبة php‏ والأخضر الاستعداد الكامل php‏ وال501 My‏ .ولابد ان يكون باللون الأخضر للعمل 
عليه. وهنا انتهينا من تركيب البرنامج الذي سيعمل كسرفر لتطبيقاتنا للغة البي اتش بي و51 My‏ 
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طريقة عمل السرفر (wamp server)‏ 


عرفنا كيف يتم تنزيل البرنامج وقمنا بتنزيله على الجهاز وتركيبه. نأتي الان الى معرفة كيف يعمل السرفر الخاص بنا دائما عند العمل على السرفر لابد 
من تشغيله اولا سواء من سطح المكتب او من ايقونة البداية (start)‏ بعد تشغيل البرنامج وظهورها باللون الاخضر في الشريط السفلي كما في 
الصورة : 


كما تلاحظ اللون الأخضر للأيقونة وهو ان السرفر مستعد للعمل بشكل كامل. ننتقل الأن الى المجلد العام الذي سنضع فيه مجلدات المواقع التي نعمل 
عليها والمسار كالتالي: (جهاز الكمبيوتر — قرص (C:)‏ - مجلد (wamp)‏ — مجلد (www)‏ ). المجلد www‏ نضع فيه المواقع كل موقع مجلد داخله 
وقبل ذلك نقوم بحذف اي ملفات بداخله وادراج مجلدات المواقع الخاصة بنا. وداخل هذا المجلد اعتبر الموقع الخاص بك في سرفر حقيقي على الانترنت. 


نأتي الآن لتشغيل السرفر في المتصفح وهناك طرقتين بعد تشغيله وظهوره باللون الاخضر: 
الطريقة الأولى: فتح المتصفح ووضع الرابط التالي: ( http://localhost‏ ). 


الطريقة الثانية: من الأيقونة للسرفر نضغط بمؤشر الفأرة عليها باليسار وستظهر خيارات نضغط اول خيار في الأعلى (localhost)‏ كما في الصورة: 


Powered by Alter Way 
5 Localhost 


[NE 3] phpMyAdmin 
N www directory 


Start All Services 
Stop All Services 
Restart All Services 


Put Online 


بعد عمل احد الطريقتين السابقتين ستظهر الصفحة التالية في المتصفح :(localhost)‏ 
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W 
J 
WampServer 
Server Configuration 
Apache Version : 2.2.22 
PHP Version : 5.3.13 
Loaded Extensions : ğ Core 
die date 
3F iconv 
¥ pcre 
JF tokenizer 
$% PDO 
die xmireader 
de mysql 
die xdebug 
MySQL Version : 5.5.24 
Tools 
# phpinfo() 
فق‎ phpmyadmin 
Your Projects 
E another 


J bcmath 
de ereg 

Jie json 

die Reflection 
Š zip 

JF Phar 

di xmlwriter 
de mysqli 


J calendar 

di filter 

de mcrypt 

die session 

die zib 

die SimpleXML 

J apachezhandler 
Se pdo_mysql 


JF com_dotnet 
جل‎ fop 

SPL 

JF standard 
die libxml 

die wddx 

die mbstring 
3¥ pdo. sqlite 


Version 2.2 Version Francaise. 


¥ ctype 
die hash 

die odbc 

¥ mysalnd 
di dom 

de xml 

Te od 

die mhash 


كما تشاهد أعلاه ظهرت الصفحة الرئيسية لل (Tools) 83555 (localhost)‏ وهنا يندرج في الاسفل (phpinfo)‏ وهي معلومات حول البي اتش بي 
في السرفر ورقم النسخة والاعدادات وايضا (phpmyadmin)‏ وهو الاهم هنا ومنه نتحكم بقواعد البيانات بشكل كامل. أما ما يندرج تحت ( Your‏ 
و [10): هنا تظهر المجلدات التي تعمل عليها من gilga‏ وصفحات ويب وكل موقع يكون في مجلد كلا على حده. 
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اول تطبيق في (PHP)‏ 


نقوم بعمل مجلد جديد داخل مجلد www‏ ونسميه مثلا -web1‏ (تعرفنا مسبقا این يوجد مكان www‏ ( 
نفتح برنامج .Dreamweaver‏ 
من برنامج Dreamweaver‏ نختار (file)‏ ثم (new)‏ 


بعد تنفيذ الخطوة السابقة نختار (PHP)‏ ثم زر (create)‏ كما في الصورة التالية. 


CL 1-2 


[3 Bue s 1 column fixed, centered 
$ 1column fixed, centered, header and foot 
Blank Template 3 : 1 column liquid, centered 
1 column liquid, centered, header and foot 
2 column fixed, left sidebar 
Th Fluid Grid Layout 2 2 column fired, left sidebar, header and fd 
2 column fixed, right sidebar 
: 2 column fixed, right sidebar, header and 
Paek Terps 2 column liquid, left sidebar 
: 2 column liquid, left sidebar, header and fc 
[E Pase hom Same |. : 2 column liquid, right sidebar 
T 2 column liquid, right sidebar, header and 
m 2 3 column fixed 
«| Other 4 3 column fixed, header and footer. 
j 3 column liquid 
3 column liquid, header and footer : mw ES 
HTMLS: 2 column fixed, right sidebar, heac — 
HTMLS: 3 column fixed, header and footer 


Add to Head - 


€ 


Enable InContext Editing 
Learn more about Business Catalyst. 


<html xmins-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 


ee ee oala م‎ 


N 


Fanan 


[<> Hm] Format [None v] Cass None ~ BZ iim mw] | © 
B css ID None X Link ” 9! Target - 


| Page Properties. ] | ListItem... | 
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Bay‏ اسم الصفحة (Untitled)‏ نقوم بحفظها بالضغط على (file)‏ ثم (save)‏ ستظهر نافذة تحدد لنا مكان وضع الصفحة وبدورنا نقوم بالذهاب من 
خلالها الى القرص (C:)‏ ثم (wamp)‏ ثم (www)‏ ثم المجلد الذي سنضع فيه الصفحة التي سنبرمج فيها (77611) ونسمي الصفحة بأي اسم وليكن 
(index)‏ 


سيكون لدينا ملف بي اتش بي جاهز للعمل عليه وتجربته. 
نقوم بعمل أول كود في البي اتش بي وهو كالتالي: 


No syntax errors. 
<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/IR/xhtm11/DTD/xhtmli-transitional 


1 


PEE «html xmins-"http://www.w3.0rg/1999/xhtml"» 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
SÎ <title>Untitled Document</title> 

</head>‏ ن 

7 «body» 

8 

<2 ;'مرحيا Ho‏ قي عالم البي اتش ' EE <?php echo‏ 

10 


</body>‏ اناك 
</html>‏ 12 


كما تلاحظ أعلاه قمنا بعمل اول كود في PHP-‏ ونأتي لشرحة ; 


<?php‏ هذه اول اساسيات البي اتش بي عند اي كود تريد العمل عليه في البي اتش بي لابد ان تكتب علامة الاصغر وعلامة الاستفهام وحروف البي 


اتش بي كما تراه امامك ودون اي فراغ بينهم وهي علامة او شارة للسرفر بوجود كود بي اتش بي. 

echo ' '‏ وتعني إخراج نتيجة أوشي معين أو أمر للسرفر بإخراج ما بين علامتي التنصيص (نحن طلبنا اخراج نص ترحيب كما نشاهد). 
: فاصلة منقوطة وتعني انتهاء الأمر وهي مهمة جدا وبدونها لا يتنفذ شيء بالإضافة لعلامتي التنصيص. 

<7 علامة الاستفهام وعلامة اكبر وهي تعني انتهاء كود البي اتش بي وهي مهمة أيضا. 

تنفيذ الصفحة : 


لتنفيذ الصفحة التي قمنا بعمل الكود فيها نقوم أولا بالحفظ ثم فتح (http://localhost)‏ تحت (Your Projects)‏ ستجد المجلد (web1)‏ الذي فيه 
صفحة الويب التي تبرمج فيه. نضغط على المجلد سيفتح Ul‏ مباشرة الصفحة (index.php)‏ وستظهر النتيجة كما في الصورة التالية: 


MITT‏ اتش يي 
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أساسيات البى اتش بی (PHP Basics)‏ 


تضمين كود PHP‏ فى صکحات الويب 
يمكنك الان تضمين اكواد البي اتش بي ضمن (html)‏ وهي ميزة مفيدة كوننا تعلمنا كيفية عمل الموقع كاملا بتنسيق ال(وو0) ونقوم الان بتضمين كود 
(php)-!‏ ليضيف للموقع التفاعلية أي يحوله من ستاتيك الى تفاعلي. 


:Short-Tags (PHP)! الكود المختصر‎ 


في الكود السابق قمنا بعمل أول كود في البي اتش بي و شكلة العام او صيغته العامة كالتالي: 


لكن سيكون متعب اضافة (php)‏ بعد كل علامة استفهام وعلامة أكبر (<?php)‏ كما في الصورة أعلاه. سيكون لدينا الان كود مختصر لذلك وهو كما 
في الصورة التالية: 


»? م"برحيا لك قي الكود المختصر E echo"‏ 16 


لاحظ حذفنا (php)‏ من الكود. لكن هناك تعديل مهم في اعدادات السرفر (wamp server)‏ لكي يتم قبول الكود المختصر علما ان بعض السرفرات لا 
تقبل او لا تعترف بالكود المختصر حتى السرفرات العامة على الانترنت لذلك لابد من تعديل في ملف php.ini‏ الخاص بالسرفر لديك من خلال الخطوات 
التالية: 


الضغط بالماوس على ايقونة السرفر كما في الصورة والاختيار كما في الشكل أيضا: 


' Powered by Alter Way 
E] Localhost 
B) phpMyAdmin 
[By www directory 


Version » 
PHP settings 1 
PHP extensions * 


Bl php.ini 


— Quick Admin 
| | PHP error log 


Start All Services 
Stop All Services 
Restart All Services 


WAMPSERVER 2.2 


& | 


العربية (اليمن) 


Put Online 


نضغط على الملف كما في الصورة أعلاه وستظهر الصورة التالية: 
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C]phim-Notepd د ف‎ ww o TT 11 we 0o X o T----—-——— 5$ ll» 


File Edit Format View Help 


; TTL for user-defined php.ini files (time-to-live) in seconds. Default is 300 seconds (5 minutes) 
;user ini.cache ttl = 300 


5595 ه22 
Language Options ;‏ ; 


595 هتظ 


; Enable the PHP scripting language engine under Apache. 
; http://php.net/engine 
engine — On 


; This directive determines whether or not PHP will recognize code between 

; <? and ?> tags as PHP source which should be processed as such. It's been 

; recommended for several years that you not use the short tag "short cut" and 

; instead to use the full <?php and ?- tag combination. With the wide spread use 
; of XML and use of these tags by other languages, the server can become easily 
; confused and end up parsing the wrong code in the wrong context. But because 
; this short cut has been a feature for such a long time, it's currently still 

; supported for backwards compatibility, but we recommend you don't use them. 
; Default Value: On 
; Development Value: On 
; Production Value: On 
; http://php.net/short-open-tag 
short open tag — On 


; Allow ASP-style <% %> tags. 
; http://php.net/asp-tags 
asp tags - On 


4 


كما تلاحظ أعلاه داخل ملف (php.ini)‏ اضغط على (Ctrl+f)‏ والتي تعني بحث داخل الملف ستظهر نافذة صغيرة كما في الصورة للبحث اكتب كلمة 
(short)‏ عندما تصل الى السطور المظللة تأكد من انها (On)‏ بدلا من (Off)‏ 


قم بكتابة الكود المختصر أعلاه وجربه بدون (php)‏ بعد علامة الاستفهام. كما في الكود التالي: 


<?php print م'مرحيا يك قي عالم البي اتش يبي"‎ 2< 
«? echo "«br»"; ?» 
«? echo "SHORT CODE ITS WORKING ";?» 


كما تلاحظ في السطر ١١‏ اضفنا كود مختصر وستكون النتيجة كالآتي: 


مرحيا يك في عالم البي اتش بي 
SHORT CODE 115 WORKING‏ 


ملاحظة : لا فرق بين علامتي التنصيص (' ') أو "١‏ "). 
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£e * e 
تضمين عدة اکواد ودمجها‎ 


يمكننا في ملف البي اتش بي دمج عدة أكواد في نفس الصفحة وهنا صورة عامة حول دمج الأكواد مع بعضها كما في الكود التالي: 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtmli-transitional.dtd"» 
<html xmlns-"http://www.w3.0rg/1999/xhtml"» 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /> 
«title»«?php echo المواقع الالكتروتية'‎ 3j45';?»«/title» 

</head> 

<body> 

<?php $date='17-2-2014';?> 

<p> Today's date is <? echo $date; ?> 

</body> 

</html> 


2 
3 
4 
5 


لاحظ كيف اضفنا في السطر ه لعنوان الصفحة نص بواسطة البي اتش بي ضمن كود (html)‏ في السطر ١‏ قمنا بعمل كود (php)‏ واضفنا شيء جديد 
($date)‏ وهنا علامة الدولار عندما تسبق اي اسم هنا نسميه متغير (سنتعلمه لاحقا) علما انه عبارة عن مكان في الذاكرة نخزن فيه اي شيء. هنا 
اضفنا متغير ووضعنا أو خزنا فيه تاريخ معين. 

في السطر ٩‏ دمجنا كود بي اتش بي مع htm]‏ كما تلاحظ ومعناه تعبيريا (اخرج لنا نص بالإنجليزي تاريخ اليوم هو) ثم بعد ذلك أمر بالبي اتش بي 
بإخراج ما في المتغير او ما هو مخزون فيه وهو التاريخ طبعا. وستكون النتيجة كالتالي: 


Today's date is 17-2-2014 


تضمين التعليقات فى الكود 


لعمل تعليق معين ضمن كود البي اتش بي نستخدم الإشارة ( /* .... */ ( وكما في الكود التالي: 


<?php $date-'17-2-2014'; /* هتا تعليق‎ */ ?» 
<p> Today's date is <? echo $date; ?» 
«/body» 

«/ntmi: 


كما تلاحظ التعليق في سطر ١‏ أضفناه ضمن علامتي التعليق باللون البرتقالي. 
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أنواع البيانات فى PHP‏ 


هناك العديد من انواع البيانات تتعامل معها بي اتش بي ضمن اكوادها. منها الرقمية بأنواعها العادية والعشرية والمنطقية وغيرها نناقشها كلا على 


حده: 


القيم المنطقية (Boolean)‏ 
نقصد بالقيم المنطقية هنا القيم التي تمثل الحقيقة ولها قيمتين فقط وهن (True)‏ وتعني نعم و (False)‏ وتعني لاء كما يمكننا استخدام الصفر بدلا من 
(False)‏ والرقم واحد بدلا من (True)‏ 
مثال: 
If A55 True‏ 
Then print ' its larger ';‏ 


Else print ' its smaller or equal '; 


لاحظ مثال بسيط حول استخدام بسيط حول القيم المنطقية وشرح المثال في حالة كان الرقم الذي سيكون في A‏ أكبر من IN o‏ أخرج جملة (إنه أكبر) 
مالم اخرج جملة (انه أصغر او يساوي). لا تستخدم بكثرة في برمجة المواقع الالكترونية وغالبا ما تستخدم في لغات أخرى بكثرة مثل لغة (VB)‏ 


++ £ هو 5 
كيم الاعداد الصحيحة (integers)‏ 


هي الاعداد الصحيحة او الاعداد التي لا تحوي كسور مثل YYV) ATT)‏ 
:(Float)-! e‏ 
هي القيم والاعداد التي تحوي كسور وفواصل وتستخدم هذه القيم لحساب المسافات والقيم النقدية. 
قيم السلسلة (ع5)1): 
قيم تسلسلية من الاحرف او الارقام. مثل: G$FFRRsa ): (PHP is great programing language)‏ ). 
مثال في بي اتش بي : 
$name-' Yusuf ';‏ 
echo $name;‏ 


كما تلاحظ عرفنا متغير ($name)‏ وخزنا فيه اسم (Yusuf)‏ ويعتبر هنا من نوع (string)‏ وبعده طلبنا من خلال امر الاخراج بإعطائنا القيمة التي 
بداخل المتغير والاسم. 
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(Compound Data Types) البيانات المركبة‎ 


من خلال تركيب البيانات نستطيع تجميع بيانات من نوع معين في اطار أو كيان واحد. 
المصفوفات (Arrays)‏ 
المصفوفات ونستخدمها في تجميع عناصر من نوع معين فيها وترتيبها والرجوع إليها بطريقة محددة» وكل عنصر ضمن المصفوفة له رقم معين 
كمؤشر ويسمى المفتاح وهو رقم المكان الذي يوجد به العنصر ومن خلاله نصل للعنصر المطلوب وكأنها فهرس مثال على ذلك: 
; "عدن" = ]0[ $Province‏ 
$Province [1] = "sia" ;‏ 
; "الحديدة'"' = ]2[ $Province‏ 
من خلال المثال اعلاه قمنا بعمل مصفوفة اسمها (Province)‏ وهذه المصفوفة مرقمة من صفر الى مالا نهاية: 
ففي المثال Province[0]‏ يمكن تفسيره كالتالي ( المصفوفة Province‏ ذو المفتاح او المؤشر رقم ٠‏ يوجد فيها اسم عدن ) وهكذا يتم التعبير وفهم 
المصفوفات ومحتواها. 
المتغيرات (Variables)‏ 
تبدأ المتغيرات دائما بعلامة الدولار (5) والمتغير عبارة عن مكان في الذاكرة لخزن قيمة معينة سواء كانت رقم او نص او غيره. ويمكن تعريف المتغير 
بأي اسم امثلة على ذلك: 
$name =' Yusuf '‏ 
$color = ' Red '‏ 
$salary- ' 2000 '‏ 
كما تلاحظ في المثال نقوم بعمل متغير بأي اسم وقبلة علامة M gall‏ إشارة للسرفر بأنه متغير ثم نضع ما نريده في المتغير. 
أنواع المتغيرات : المتغيرات نوعين (متغيرات محلية - ومتغيرات عامة ). 


طبعا في بعض المواقع الالكترونية او البرمجة بشكل عام تحتاج لتعريف متغيرات بكثرة وأحيانا المتغير تحتاجه في الصفحة كاملة ويتم تنفيذه كذلك في 
اي سطر في الصفحة هنا نسمي المتغير بالمتغير العام او الشامل «(Global variable)‏ بعض المتغيرات نحتاجها في جزئية معينة او لوظيفة محددة 
لذلك نعرفها داخل نطاق محدد لاستخدام التعريف للمتغير ونسمي المتغير هنا بالمتغير المحلي -(local variables)‏ 
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(Expressions) التعبيرات‎ 

نستخدم التعبير في البرمجة لتوجيه الصفحة او السرفر لعمل أمر معين ولابد من طريقة للتعبير عن ما نريد بتعبيرات محددة في البرمجة. وسنتعلم هنا 
بعض اساسيات التعبيرات المنطقية والرياضية. 

:(operands) Shtai 


هي تعبيرات عن مدخلات او قيم معروفة أو غير معروفة ويتم تعلمها في الرياضيات في المدارس (س) و (ص) أو (x)‏ و (y)‏ ونحن Ul‏ استخدام مشابه 
من حيث المعنى او الشكل ولكن استخدامنا مختلف من حيث الغرض ايضا سهل ونستخدمها للحسابات وللقيم والتكرار فقط. هي نفسها متغيرات ولكن 
عند استخدامها رياضيا وحيازتها لقيمه وقيامها بمهمه معينة نسميها (operand)‏ 


: أمثلة‎ 
$a++; //$a is the operand 
$sum = $val1 + val2; // $sum, $val1 and $val2 are operands 


في السطر الأول ++هخ متغير يقوم بعمل زيادة بمقدار واحد وهو تعبير ايضا يساوي 1+ه$ « ايضا $vall.s $sum‏ كلاهما يقومان بمهمة معينة بدون 
استخدام ارقام محددة وهنا تكمن الفائدة. 


(operators) العوامل‎ 


هي تعبيرات رياضية تقوم بعمل (action)‏ معين مثل الطرح الجمع الضرب وغيرها. والجدول التالي يحوي العوامل: 
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Operator Associativity Purpose 


new NA Object instantiation 
NA Expression subgrouping 
Index enclosure 
Boolean NOT, bitwise NOT, increment, decrement 
Error suppression 
Division, multiplication, modulus 
Addition, subtraction, concatenation 
Shift left, shift right (bitwise) 
Less than, less than or equal to, greater than, greater than or equal to 
Is equal to, is not equal to, is identical to, is not equal to 
Bitwise AND, bitwise XOR, bitwise OR 
Boolean AND, Boolean OR 
Ternary operator 


Assignment operators 


Boolean AND, Boolean XOR, Boolean OR 


Expression separation 


كما تلاحظ الجدول أعلاه يحوي عوامل كثيرة منها ما تعرفها مثل الجمع والطرح والقسمة ومنها ما هو تعبير منطقي مثل (AND)‏ والتي تعني )5( 
وايضا (OR)‏ وتعني (أو) ونستخدمهما في المقارنات. 


(Assignment Operators) التعيين‎ gi عوامل الاسناد‎ 


عوامل الاسناد ونقصد بها العوامل التي تقوم بإسناد قيمة او بيانات لمتغير معين وتعرف ايضا بعوامل التعيين او الاسناد المختصرة, فمثلا لو أردنا عمل 
أمر للبرنامج بإضافة رقم معين وليكن V‏ هناك تعبير مختصر لذلك وهو (7- + ($a‏ هنا أمرنا البرنامج أن يزيد القيمة الموجودة في المتغير $a‏ بمقدار 
„V‏ 


وهنا جدول مشابه للمثال الذي ذكرناه: 
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Example Label Outcome 

$a =5 Assignment $a equals 5 

$a += 5 Addition-assignment $a equals $a plus 5 

$a *= 5 Multiplication-assignment $a equals $a multiplied by 5 

$a /= 5 Division-assignment $a equals $a divided by 5 

$a .= 5 Concatenation-assignment $a equals $a concatenated with 5 


العوامل المنطقية (Logical Operators)‏ 
تعرفنا سابقا على العوامل الرياضية الطرح الجمع المساواة: هنا سنتعلم ايضا العوامل المنطقية وهي مشابهة للعوامل المنطقية الى حد ما وتلعب دور 
كبير في تطبيقات (php)‏ وتدعما في اتخاذ القرارات في تنفيذ اوامر صفحات الويب وفقا لقيم المتغيرات. مثال على ذلك: 

If 7» X AND 7>F ECHO 7 is Larger 


أحد العوامل المنطقية هنا هي (AND)‏ وتعني )5( ويمكن التعبير عن المثال كتابيا (اذا كان اكس اكبر من ۷ و سبعة اكبر من اف اخرج عبارة V‏ تكون 
الاكبر).وكما شاهدت مثال بسيط وتعبير بالعوامل المنطقية سهل جدا. وهنا جدول يعرض التعبيرات للعوامل المنطقية: 


Example Label Outcome 

$a 88 $b AND True if both $a and $b are true 
$a AND $b AND True if both $a and $b are true 
$a || $b OR True if either $a or $b is true 

$a OR $b OR True if either $a or $b is true 
!$a NOT True if $a is not true 

NOT $a NOT True if $a is not true 

$a XOR $b Exclusive OR True if only $a or only $b is true 
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(Equality Operators) عوامل المساواة‎ 


عوامل المساواة كما في الجدول التالي تستخدم للمقارنة بين قيمتين واختبار التكافؤ بينهما. 


Example Label Outcome 
$a == $b Is equal to True if $a and $b are equivalent 
$a !- $b Is not equal to True if $a is not equal to $b 


$a === $b Is identical to True if $a and $b are equivalent and $a and $b have the same type 
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(Control Structures) قواعد التحكم‎ 


ضمن صفحات البرمجة توجد الاكواد التي تتحكم بصفحات الويب ضمن البرمجة وفي تنفيذ البرامج والتحكم بها من حيث التوقف والتكرار والشرط داخل 
الاكواد تحتاج لتعليمات أو اكواد برمجية نسميها هنا (Control Structures)‏ قواعد التحكم وسنأخذها هنا بشكل مختصر كلا على حده. 


تعليمات الشرط (Conditional Statements)‏ 
نستخدم تعليمات الشرط للتحكم بالاكواد من حيث تحقق شروط يقابلها تنفيذ أمر معين وفي حالة المخالفة للشرط يكون هناك تنفيذ أمر آخر وهنا تكمن 
تعليمات الشرط ومنها: 


The if Statement (if) تعليمة‎ 


بالعربية معناها )13 كان) وهي الاكثر استخداما وسهولة في لغات البرمجة للتعليمات البرمجية الشرطية وصورتها العامة : 
if (expression)‏ 
statement (‏ { 


كما تلاحظ التركيب العام او الصورة العامة للكود الخاص بالشرط. ومعناه هنا (if)‏ وتعني 13 كان جملة الشرط (expression)‏ متحققة فإن الأمر هو ) 
statement (‏ وطبعا هذه صورة عامة وليست اوامر فعليه وسيكون لنا تطبيقات قادمة على ذلك في المواقع التي سننشئها. 


The else Statement (else) تعليمة‎ 


جاءت تعليمة (else)‏ تكملة لتعليمة (if)‏ أي ان تعليم (if)‏ تقوم بعمل شرط معين فإذا تحقق الشرط تم تنفيذ الأمر المعين منها. ولكن هنا حالة ناقصة في 
حالة لم يكن الشرط متحقق فلن يتم اتخاذ اي إجراء بديل لذلك جاءت هذه التعليمة تكملة (if)‏ ومعناها (وإلا أو (alla‏ ومثال على ذلك: 


if (expression) 
[statement1 ) else (statement2 } 
(statement2) قم بتنفيذ الامر‎ (else) مالم‎ (statement) قم بعمل الامر‎ (38334 (expression) وتعبيريا : )13 كان الشرط‎ 
(The elseif Statement) تعليمة وإلا اذا كان‎ 


اخذنا مسبقا (else).s (if)‏ ولو لاحظنا انهما يعملان على شرط واحد فقط. هنا لدينا تعليمة شرطية جديدة وهي (elseif)‏ وهي اضافة للشرط (if)‏ ونعني 
هنا في حالة كان لدينا شرط معين وفحصنا هذا الشرط ودخلنا في أمر الشرط وكان لدينا شرط آخر ضمن الشرط الاول فإننا نستخدم هذه التعليمة لعمل 
شرط آخر ضمن الشرط الاول ومن خلال المثال التالي تتضح المسالة: 


if (expression) 


{ statement ) 


elseif (expression) 
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1۰۷ 
{ statement2 } 


else { statement3 } 


كما تلاحظ المثال أعلاه أضفنا التعليمة الشرطية (if)‏ والشرط (expression)‏ في illa‏ تحققه يتم تنفيذ الامر في (statement)‏ ثم بعد ذلك اضفنا 
شرط مستند على الشرط السابق وهو (elseif)‏ ويعني والا اذا كان (expression)‏ الذي هو الشرط الثاني في حالة تحققه يقوم بتنفيذ تعليمة 
(statement2)‏ مالم (else)‏ ينفذ تعليمة او امر (statement3)‏ 


(The switch Statement) تعليمة التبديل‎ 


تستخدم تعليمة التبديل (switch)‏ للمقارنة بين عدد كبير من القيم شاهد المثال: 


switch ($category) 


case "news": 

echo "«p» What's happening around the world</p>''; 
break; 

case "weather": 

echo "«p»Your weekly forecast</p>"'; 
break; 

case "sports": 

echo "«p»Latest sports highlights«/p» "; 
break; 

default: 

echo "«p» Welcome to my web site</p>"; 


} 


من خلال المثال في السطر الاول افتتحنا بالتعليمة switch‏ ثم العنصر (($category)‏ الذي سنقارنه بالشروط بداخل التعليمة switch‏ ثم ندخل 
مباشرة للسطر case "weather": Y‏ ومعناها في حالة ما بداخل العنصر يساوي weather‏ نفذ التعليمة او الامر في السطر ؛ ثم break‏ ومعناها 
توقف. اذا لم يتحقق الشرط ينتقل للذي coax;‏ في حالة لم تتم الشروط كاملة يصل للأخير default‏ وينفذ آخر تعليمة أو أمر. 
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(Looping Statements) fj il تعليمات الحلقات او‎ 


تعليمات التكرار او الحلقات هي عملية تكرار لتعليمات محددة الى ان يتحقق شرط معين وهناك عدة تعليمات تعمل ضمن التكرار او الحلقة ومنها: 
تعليمة (The while Statement) while‏ 
(while)‏ معناها (عندما يكون) وتعمل على التكرار وبتنفيذ عدة تعليمات او اوامر بعد تحقق شرط معين وعند الانتهاء من هذا الشرط يتم الخروج منها 
والتعبير الرئيسي او العام لها كالتالي: 
while (expression)‏ 
statements (‏ { 


كما تلاحظ الشكل العام while-‏ وكأنها تقول للسرفر عندما يكون (expression)‏ نفذ لي (statements)‏ التعليمات او الاوامر. 


تعليمة (The do while Statement) do while‏ 
تعليمة do while-‏ تعمل نفس عمل while-!‏ بخلاف أن الأولى تقوم بالتحقق من الشرط ثم التنفيذ أم do while‏ تقوم بتنفيذ الاوامر او التعليمات ثم 
تنظر لتحقق الشرط فإن خالف الشرط توقفت وإن تحقق الشرط واصلت تنفيذ التعليمات وصورتها العامة كالتالي: 
do (statements)‏ 
while (expression);‏ 


كما تلاحظ الصورة العامة do whiled‏ في البداية أمر do‏ وهي امر بالتنفيذ (statements)‏ تعليمات ثم while‏ عندما يكون أو يتحقق الشرط 
(expression)‏ في حالة عدم تحقق الشرط لا يرجع لعمل التعليمات مرة آخرى عند تحققه يرجع ل do‏ وهكذا. 


(The for Statement (for) تعليمة‎ 


تعليمة for‏ من أهم التعليمات التكرارية المستخدمة في البي اتش بي وغيرها من لغات البرامج وتقوم بعمل تكرار لعدة مرات بواسطة شروط محددة 
وصورتها العامة كالتالي: 

for (expression; expression2; expression3) 

[statements ( 


كما تلاحظ تعليمة for‏ أو حلقة for‏ ثم ما بين القوسين expression]‏ الشرط الاول expression2.5‏ الشرط الثاني expression3.s‏ الشرط الثالث 
ثم عمل التعليمات (statements)‏ 
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(Functions) الدوال‎ 


تساعد الدوال في إنجاء مهام كثيرة ضمن البرمجة بشكل عام وتحتوي ARI‏ البي اتش بي من منات (JI gall‏ الجاهزة لتقوم بمهام محددة ومعينة. وهناك 
دوال ننشئها نحن لتقوم بمهام معينة وتعمل بالشكل التالي: 


لأن المواقع والبرامج احيانا تتطلب مهام مكررة ومعقدة اتت هذه الدوال لتحل هذه المشكلة ولتوفير الجهد ونقوم بعمل دالة وهذه الدالة نقوم بتعريف 
المتغيرات الخاصة بها مع المهمة التي ستقوم بها وتكون هذه الدالة في صفحة ويب ثم من أي مكان نريد عمل مهمه هذه الدالة نستدعيها فقط استدعاء 
ونعطيها المدخلات ولا نحتاج لعمل المهام في كل مرة وتعقيد الاكواد كلما تطلب الأمر. 


مثال على الدوال : 


:(pow) Alla‏ وهي Alla‏ تقوم بحساب (أس الاساس) مثلا 5 أس Y‏ يساوي ١١5‏ لأن ه ضربناها في نفسها Y‏ مرات حسب الأس كما تعلمناها في 
المدارس. قم بعمل الكود التالي داخل صفحة البي اتش بي وانظر النتيجة: 


i <?php echo pow(5,3);?» 


طبعا ستتساءل كيف تم ذلك وعلى أي أساس. (pow) Alla‏ موجودة في لغة البي اتش بي دالة جاهزة مبرمجة وتعرف ماهي مهمتها ويقتصر علينا فقط 
استدعائها واعطائها المدخلات فقط. هذا مثال عام وبسيط حول الدوال وهناك دوال مهمه سنستخدمها فيما بعد في عملنا على المواقع بلغة البي اتش بي 
هذا بالنسبة للدوال الجاهزة نأتي إلى طريقة عمل دالة من عملنا نحن. 


القيام بإنشاء دالة واستدعائها 
سنقوم بإنشاء دالة تقوم بعملية حسابية وليكن عملية جمع مثلا سنقوم بعمل الدالة كما في الكود التالي: 


<? function add($a, Sb) 
t 

Stotal = Sa + $b; 
echo "Total: S$total"; 

) 


echo add(60,60); 
?» 


كما نلاحظ في السطر ١7‏ فتحنا لكود البي اتش بي بإشارة )?<( ثم قمنا بكتابة (function)‏ وهو أمر لعمل دالة ثم (add)‏ ومعناه اضافة او جمع نحن 
سمينا بهذا الاسم وهو متاح لأن تسمي ما شئت المهم أن لا تكون Alla‏ محجوزة وموجودة في البي اتش بي ثم فتحنا قوسين بداخل القوسين ($a , $b)‏ 
عرفنا متغيرات ج و b‏ وفصلنا Lagin‏ بفاصلة والمتغيرات هذه مهمه لأنه هي من ستستقبل المدخلات والقيم التي سنعطيها للدالة. 


في السطر ٠١‏ عرفنا متغير $total‏ وهو المتغير الذين سنضع فيه مجموع المتغيرات $a‏ و Sb‏ ثم قمنا بعمل جمع بين المتغيرات التي عرفناها. في 
السطر ٠١‏ عملية إخراج الناتج وهو المجموع في $total‏ ثم أغلقنا بالحاصرة ( عمل الدالة وهي مهمة لأن عمل ومهام الدالة تأتي بين الحاصرتين ( 1 
سطر ۱۳ وسطر AT‏ 


في سطر ١8‏ نستدعي الدالة 200 وندخل لها القيم المطلوب جمعها. طبق ولاحظ النتيجة. 


طبعا هناك دوال لها مهام أكبر وأكثر تعقيدا منها ما هو متخصص بالملفات وقواعد البيانات والنصوص وغيرها. 
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(Arrays) المصفوفات‎ 


(Arrays) المصفوفات‎ 


المصفوفات كما ذكرناها سابقا نستخدمها في تجميع عناصر من نوع معين فيها وترتيبها في متغير واحد فقط والرجوع إليها بطريقة محددة» وكل عنصر 
ضمن المصفوفة له رقم معين كمؤشر ويسمى المفتاح وهو رقم المكان الذي يوجد به العنصر ومن خلاله نصل للعنصر المطلوب وكأنها فهرس مثال 
على ذلك: 


; "عدن" = ]0[ $Province‏ 
$Province [1] = "sia" ;‏ 
; "الحديدة'"' = ]2[ $Province‏ 
من خلال المثال اعلاه قمنا بعمل مصفوفة اسمها (Province)‏ وهذه المصفوفة مرقمة من صفر الى مالا نهاية: 


ففي المثال Province[0]‏ يمكن تفسيره كالتالي ( المصفوفة Province‏ ذو المفتاح او المؤشر رقم ٠‏ يوجد فيها اسم عدن ) وهكذا يتم التعبير وفهم 
المصفوفات ومحتواها. 


إنشاء المصفوفات (creating arrays)‏ 
يمكننا إنشاء المصفوفات بسهولة وهي عن طريقة تعريف بسيط وادخال البيانات ضمن المصفوفة كما في الكود التالي: 

Sbooks = array ('book1', ' 50012,‏ 
كما تلاحظ أعلاه عرفنا متغير واسميناه $book‏ ثم اسندنا له مصفوفة (array)‏ طبعا هي كلمة ثابته ثم قمنا بعمل الأقواس التي سيتم ادخال العناصر 


الخاصة بالمصفوفة داخلها وهم ('book1','book2','book3')‏ ثم أغلقنا الكود بالفاصلة المنقوطة. هذه طريقة والتي شرحناها في البداية طريقة 
أخرى أيضا. 


إخراج عناصر المصفوفة 
هناك طرق لإخراج عناصر المصفوفة ومنها كما في الكود التالي: 


echo Sbooks[0]: 
echo '«br»'; 
echo Sbooks[1]: 
echo '«br»'; 
echo Sbooks[2]: 


كما تلاحظ في سطر ١5‏ قمنا بعمل أمر بإخراج العنصر في المكان ` الموجود في المصفوفة $books‏ وفي السطر lae ٠١‏ سطر جديد كي لا تتقارب 
العناصر مع بعضها وفي سطر ١7‏ أمر بإخراج العنصر في المكان رقم Y‏ من المصفوفة $books‏ وهكذا. لو افترضنا ان لدينا ٠٠١‏ عنصر هل من 
المعقول ان نقوم بعمل سطر إخراج لكل عنصر. هنا يأتي حل آخر سهل جدا ومما تعلمناه مسبقا وهو عمل حلقة تكرار باستخدام ( (for looping‏ وعد 
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من ٠‏ الى ٠٠١‏ وإخراج العناصر كاملة كما في الكود التالي: 
Sbooks = array ('booki','book2','book3');‏ 
for ($x=0;$x<=2;$x++){‏ 


echo Sbooks[Sx]: 
echo '«br»'; 


في الكود السابق وكما تلاحظ استخدمنا أحد أدوات التكرار الشرطية. في السطر ١‏ كما ذكرنا سابقا قمنا بعمل المصفوفة وعناصرها في المتغير 
$books‏ »في السطر ٠١‏ قمنا بتعريف (for)‏ وتعلم انها تقوم على ثلاثة شروط الأول وهو بداية العد وحددنا هنا أن يبدأ من الصفر لأن المصفوفة 
محتواها يبدأ من الصفر وحددنا بالمتغير 45-0 ثم الشرط الثاني وهو إلى كم نريد العد والتنفيذ وحددنا إلى أن يصبح أصغر أو يساوي ؟ لأن العناصر 
لدينا هي إلى Y‏ في المصفوفة. 


الشرط الثالث حددنا أن يزداد المتغير $x‏ بمقدار واحد في كل تنفيذ حتى يتم المرور للعناصر في المصفوفة بداية من الصفر ثم يزداد واحد في كل مرة. 
في السطر ٠١‏ كتبنا echo $books[$x];‏ وتعني إخراج العنصر في المتغير $book‏ للمصفوفة رقم $x‏ طبعا $x Bay‏ في البداية تساوي ٠‏ في 
المرحلة الأولى فتقوم ال(إه]) بإخراج العنصر في المكان صفر في المصفوفة. 


في الخطوة الثانية يزداد اله بمقدار واحد إضافة للصفر ويكون قيمة اله يساوي واحد فتقوم (for)‏ بإخراج العنصر في المكان رقم ١‏ في 
المصفوفة. 


المرحلة الثالثة يزداد ال×$ بمقدار واحد فيصبح قيمته Y‏ فتقوم ال(إه]) بإخراج العنصر في المكان Y‏ في المصفوفة في المتغير .Sbook‏ ثم تأتي 
المرحلة الرابعة ويزداد xd‏ بمقدار ١‏ فتكون القيم تساوي Y‏ فتقوم for‏ بإيقاف العمل لأن Y‏ التي هي قيمة Sx‏ لا تتوافق مع الشرط X«-2‏ 
فتتوقف fordi‏ عن العمل وينتقل السرفر لما بعد اله ويخرج منها. طبعا لم نذكر محتوى السطر ١١‏ وبديهيا ستعرف ان fordh‏ تقوم بعمل سطر جديد 
في كل مرحلة وستكون النتيجة كالتالي: 


bookl 
book2 
book3 
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(HTML Forms) نماذج الإدخال‎ 


نماذج الإدخال أو (HTML Forms)!‏ من الأدوات الهامة التي تقوم بتمرير البيانات من صفحات البي اتش بي htmldls‏ إلى السرفر أو قواعد 
البيانات. ونعرف جميعا هذه النماذج التي نستخدمها في مواقع الانترنت عند إدخال البيانات أو الخيارات وسنتناول هنا النماذج لكي نستفيد منها في 
تطبيقاتنا في البي اتش بي لأنها اساس اللغة التفاعلية. والصورة العامة للفورم أو النموذج كالتالي: 


«form» 

input elements 

</form> 

كما تلاحظ السطر الأول فتحنا كود الفورم وفي السطر الثاني نص يعبر عن نوع الإدخال ربما يكون نص أو اختيار أو تعليق وما إلى ذلك وفي السطر 
الثالث أغلقنا الفورم. 


(Text Fields) حقول الخص‎ 


نستخدم حقول النص لندخل البيانات مثل الأسماء »كلمات المرورء الإيميل وصورتها العامة داخل الفورم كالتالي: 
«input type-"text''»‏ 


حيث input‏ معناه برمجيا $131 ادخال و type‏ النوع ومن خلاله نحدد نوع الإدخال هنا في المثال حددنا text‏ ويعني نص سيكون اسم أو أي نص 
عادي. سنقوم الأن بإنشاء فورم وبداخله حقول نص Text Field‏ وكما في المثال التالي: 
«form»‏ 11 
IPA Name :-inpu- type="text" name-"firstname" /» «br /»‏ 


13 Last Name :«input type="text" name-"lastname" /> 
145 — </form> 


كما تلاحظ في الكود أو المثال السابق في السطر ١١‏ تم افتتاح الفورم » في السطر US ١ Y‏ نص عادي : Name‏ ومعناه الاسم ثم بدأنا بعمل الحقل 
الخاص بالاسم وكتبنا بين علامتي (</ > ) كود الحقل input‏ ثم عرفنا نوعه type="text"‏ من خلال الخاصية type‏ و text‏ تعني نص. ثم اضفنا 


خاصية namo-‏ وهي خاصية لتعريف اسم الحقل وهي ميزة مهمه للمبرمج للتمييز بين الحقول وهنا Upau‏ الحقل firstname‏ من دون فراغات وهي 
تسمية منا نسميه كما نريد كتلميح باسم الحقل ثم أغلقنا حق الادخال. 


في Y Y Jeu‏ نفس العملية السابقة Us‏ نص عادي Last Name:‏ ثم حقل الإدخال وعرفنا نوعه على انه نص ثم اضفنا له الاسم الذي نريده ثم أغلقنا 
الحقل. وهنا نصل لنهاية الفورم في السطر ؛ ١‏ ونغلقه. وستكون النتيجة بعد التطبيق والحفظ كالتالي: 


Name :| 


Last Name :| 


أنواع الحقول : طبعا هناك أنواع للحقول بالنسبة للمدخلات فهناك النص العادي (text)‏ كما في المثال وهناك البريد الالكتروني (email)‏ وهناك كلمة 
مرور (password)‏ لذلك تلاحظ أحيانا أن المواقع لا تقبل منك الايميل الذي تدخله بشكل خاطئ او متحايل. ايضا كلمة المرور عند كتابتها لا تظهر 
الأحرف. قم بتجربة الأنواع المذكورة بدلا من text‏ ولاحظ الفرق. 
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ركذلا 


( Radio)Al أزرار‎ 


ايضا من انواع cil sal‏ الادخال (Radio Buttons)‏ وصورتها العامة : 
«input type-"'radio"»‏ 
وتستخدم للاختيار الوحيد من بين الخيارات مثل خيارات ذكر وأنثى شاهد تطبيق الكود: 


«form» 

Sex: 

«input type-"radio" name-"sex" value-"male"»Male 
«input type-"radio" name-"sex" value-"female"»Female 
</form> 


من خلال الكود أعلاه تم عمل الفورم الخاص radio button-lu‏ في سطر ١‏ فتح الفورم »السطر ١8‏ كتبنا نص عادي يشير الى بيانات الازرار نفسها 
وكتبنا الجنس (sex)‏ أو النوع »في السطر ۱۹ Glas‏ بعمل ازرار الراديو كتبنا «input‏ ثم حددنا النوع radio‏ ثم الاسم ثم الأهم القيمة (value)‏ لاحظ 
في الحقل الخاص بالنص لم نضفها .لماذا؟ لأن النص الذي سيكتبه الشخص في الحقل هو القيمة (value)‏ أما هنا فقط سيكون المتاح هو الاختيار لذلك 
نضع القيمة نحن فنضع هنا القيمة تساوي (male)‏ وتعني ذكر وتخزن في الزر نفسه وفي حالة تم الاختيار عليه تقوم قاعدة البيانات باستقبال القيمة 
(value)‏ وهي الذكر . ثم نغلق الزر الأول. ثم في الأخير كتبنا نص عادي للشخص ليفهم أن الخيار هو للذكر .Male‏ 


في السطر ٠١‏ بنفس فكرة الخيار الأول مع اختلاف قيمة الزر (female)‏ ثم أغلقنا الفورم في سطر .۲١‏ سيكو الشكل كما في الصورة : 


Sex: ® Male O Female 


(Checkboxes) JI خيارات‎ 


تسمح للمستخدم بالاختيار أو عدم الاختيار من الخيارات المتاحة وصورتها العامة: 
«input typez" checkbox" »‏ 


نستخدم خيارات (checkbox)‏ لعمل استبيانات أو أخذ معلومات بسهولة من المستخدم ولدينا مثال هما حول كيفية عملها وهو سؤال عن وسيلة 
المواصلات مثلا وكما في الكود التالي: 


«tform» 

Transport: 

«input type-"checkbox" name-"checkbox" value-"car" /»Car 
«input type="checkbox" name-"checkbox" value-"bike" /»Bike 
</form> 


3 
4 
5 
6 


2 
5 
2 
z 
2 
E 
2 
z 
2 


بنفس آلية عمل الأدوات والأزرار السابقة في السطر ۲۳ بدأنا فتح الفورم »في السطر ؛ ؟ كتبنا نص عادي للإشارة إلى المطلوب من الاختيارات وكتبنا 
(transport)‏ وتعني وسيلة مواصلات. في السطر Ye‏ بدأنا عمل الخيارات اخترنا النوع (checkbox)‏ ثم الاسم ثم القيمة وهي ألأهم هنا ووضعنا 
القيمة (car)‏ وتعني سيارة ثم أغلقنا الاختيار وبعده كتبنا نص عادي بأن الخيار يخص السيارة. في السطر Y‏ تم عمل الخيار الثاني بنفس طريقة الأول 
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باختلاف القيمة والتي (bike)gh‏ وتعني دراجة هوائية ثم أغلقنا الخيار» واتبعناها بالاسم Bike‏ للإشارة لاسم الخيار أو قيمته. وسيكون شكل الخيارات 
كالتالي: 


Transport نا‎ Car نا‎ Bike 


(Submit Button) زر الإرسال‎ 


نقوم بإرسال البيانات إلى السرفر عن طريق زر الإرسال ويكون الزر موجود ضمن الفورم لأي أدوات إدخال سواء حقول نص أو خيارات أو بحث أو 


غيرها. وصورته العامة: 
«input type='"'submit''>‏ 


يكون الإرسال بعد الضغط على الزر إرسال (submit)‏ فيقوم بعمل إرسال جميع بيانات الحقول او الاختيارات إلى ملف الأكشن في بداية الفورم el)‏ 
نتطرق اليه) وكما في الكود التالي: 


«form name-"input" action-"form action.php" method-"get"» 
User name: «input type="text" name-"user"» 

«input type-"submit" value-"Submit"» 

</form> 


من خلال الفورم أعلاه e‏ في السطر ۳١‏ تم فتح فورم تم تسمية الفورم inputs‏ ثم خاصية action‏ والتي تحدد الصفحة التي ستقوم باستقبال البيانات 
وهي form. action.php‏ ثم عمل خاصية method‏ والتي تحدد الدالة التي يتقوم بأخذ بيانات (سنتطرق لها لاحقا). 


في السطر Y Y‏ تم عمل نص عادي User name‏ ثم بدأنا بعمل الحقل لعمل نص معين مع النوع والاسم» في السطر TY‏ نقوم بعمل الزر (submit)‏ 
حددنا النوع (submit)‏ ثم القيمة وحددنا (submit)‏ ايضا ويمكنك تغييرها بالعربي إن شئت. ثم أغلقنا الفورم. وسيكون كما في الشكل التالي: 


ملاحظة : في حالة عدم كتابة valued‏ للزر بشكل أتوماتيكي يتم إنشاءها في المتصفح وباللغة العربية إذا كان متصفحك عربي وباللغة الإنجليزية إذا 
كان انجليزي وهكذا حسب لغة المتصفح الذي تستخدمه. 


الكائحة المخنسدلة (drop-down list)‏ 
من الأدوات الهامة في الصفحات التفاعلية والتي تتيح للمستخدم الاختيار من بين القائمة المنسدلة والصورة العامة كالتالي: 


«select» 


«option valuez'"yemen''» Yemen«/option» 


</select> 
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كما تلاحظ الصورة العامة للكود نبدأها «select»-Iu‏ ثم نبدأ بإضافة العناصر التي ستظهر للمستخدم من خلال كود «option?‏ هنا قمنا بعمل الخيار ثم 
القيمة وعينا (yemen)‏ ثم إغلاق البادئة ل<110م0> ثم النص الذي سيظهر للمستخدم ثم إغلاق coption-!‏ ثم كتبنا النص الذي سيظهر للمستخدم 
(Yemen)‏ وهي التي ستظهر للمستخدم, ثم أغلقنا option-‏ « إذا اردنا زيادة خيارات نكرر option-l‏ في السطر الأخير نغلق ال6ح»5©1. وكما في 
الكود التالي: 


«form» 

«select» 
«option value-"aden"»Aden«-/option» 
«option value-"sanaa"»Sana'a«/option» 
«option value-"ibb"»Ibb«/option» 
«option value-"mahwit"»Mahwit«/option- 

«/select» 

</form> 


io C N 


0 


فم يم 


3 
3 
3 
4 
4 
4 
4 
4 


Ww‏ ظر 


كما تلاحظ الكود بدأنا بفتح الفورم ثم بدأنا بعمل القائمة المنسدلة «select»‏ ثم lae‏ الخيارات عن طريق option‏ وإدخال القيم والنصوص التي 
ستظهر للمتصفح .ثم إغلاق القائمة المنسدلة </select>‏ ثم أغلاق الفورم. 


سيكون شكل القائمة كالتالي: 


(text area) منطقة الخص‎ 


نستخدم textarea-l!‏ للنصوص المطولة والتي نلاحظها في المواقع مثل التعليقات مثلا نضع التعليق في الحقل المناسب ويسمى text area-‏ وصورته 


العامه: 


«textarea rowsz".." colsz".."» 
وتعني عدد الأعمدة. وكما في الكود التالي:‎ cols eis وهي لتعيين عدد الصفوف‎ TOWS ثم خاصية‎ X«textarea كما تلاحظ الصورة العامة بدأنا بكود‎ 


«form» 

«textarea rows-"5" cols-"40"» 
Lia gai! aisi 

«/textarea» 

«/form» 


كما تلاحظ الكود أعلاه في السطر £V.‏ تم البدء بعمل الفورم ثم في سطر ^£ البدء textarea-G‏ وتم تعيين عدد الصفوف (rows="5")‏ وحددنا خمسة 
صفوف عملنا خاصية عدد الاعمدة ايضا )"40 (co]s—'‏ وأغلقنا البادئة. في السطر £3 عملنا نص كملاحظة للمتصفح ويمكن عدم كتابتهاء في السطر 
o.‏ أغلقنا textarea)‏ والسطر ١ه‏ أغلقنا الفورم. وسيكون شكله كما في الصورة: 
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11٩ 


cs!‏ التص هتا 


$ GET 9 $_POST Alla 


$ GET alla 


نستخدم هذه الدالة لتمرير البيانات من صفحة إلى آخري بكل سهولة عن طريق استقبال البيانات عبر المتغيرات وفيما يلي مثال حول كيفية نقل البيانات 
واستقبال الدالة GET‏ .$ لهذه البيانات علما أن البيانات التي تنقلها لصفحة آخرى تكون ظاهرة في رابط الصفحة بعد التمرير وهو الفرق بينها وبين 
POST‏ $. 


سنقوم بعمل تمرير لبيانات من خلال صفحة فيها فورم يحتوي حقل للاسم والبريد الإلكتروني وهذا الفورم يوجه هذه البيانات لصحفة أخرى فيها Alla‏ 
GET‏ $ تستقبل هذه البيانات وتعرضها للمستخدم وستكون بالطريقة التالية : 


أولا : ننشأ مجلد داخل www-ll‏ ونسميه get‏ أو أي اسم ونقوم بعمل صفحة جديد ولتكن welcomel.php‏ في برنامج الدريم ويفر والكود فيها 
كالتالي: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/IR/xhtmll1/DID/xhtmli-transitional.dtd"» 
<html xmins-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>WELCOME 1</title> 

</head> 

<form action-"welcome.php" method-"get"» 

Name: «input type-"text" name-"name"»«br» 

E-mail: «input type="text" name-"email"»«br» 

«input type-"submit"» 

«/form» 

<body> 

</body> 

</html> 


هذا الكود في صفحة welcomel.php‏ وكما تلاحظ فورم عادي كما تعلمناه مسبقا والمهم هنا أن تلاحظ الخاصية action‏ في سطر V‏ حددنا اتجاه 
تمرير البيانات وستذهب إلى صفحة Usa. welcome.php‏ الطريقة method‏ وهذه الخاصية تطلب منك الطريقة ونحن حددنا طريقة أو دالة 
GET‏ $ كما تلاحظ. وهي صفحة أخرى سنقوم بعملهاء وايضا مهم ان تلاحظ خواص name-‏ للحقلين جعلنا لكل Lagia‏ اسم احدهما name‏ والآخر 
email‏ ويعملان بنفس طريقة المتغيرات يتم خزن البيانات التي سندخلها فيها. وسيكون شكلها عند التنفيذ كما في الصورة: 


Name: 


E-mail: 


إرسال 


ثانيا : نقوم OYI‏ بعمل الصفحة الثانية welcome.php‏ ايضا بجانب الصفحة السابقة في مجلد get‏ و سيكون فيها GET Alla‏ $ وكما في الكود 
التالى: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmli-transitional.dtd"» 
<html xmlins-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>welcome</title> 

</head> 

Welcome <?php echo $_GET["name"]; ?»«br» 

Your email address is: <?php echo $_GET["email"]; ?> 

<body> 

</body> 

</html> 


l 
2 
3 
4 
5 
6 
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O‏ در 


Bay‏ في الكود سطر V‏ كتبنا نص عادي وهو Welcome‏ وبعده كتبنا كود بي اتش بي وطلبنا إحضار ما داخل name-!‏ وهو الخاص بالحقل الاول 
الذي سيكون فيها الاسم واستخدمنا طريقة الدالة GET‏ $ لإحضار البيانات الخاص بحقل الاسم لاحظ طريقة الكتابة بالخاصية GET‏ $ 


نضع قوسين وفاصلتين منقوطتين بينهما وبين الفاصلتين المتغير ثم بعد القوسين فاصلة منقوطة ونغلق كود البي اتش بي. وكل حرف وكل فاصلة دائما 
مهمه جدا. في السطر A‏ كتبنا سطر عادي Your email address is:‏ وتعني عنوان بريدك الالكتروني هوء وثم قمنا بعمل كود بي اتش بي وكتبنا 


بداخلة تفس الكود السابق وطلبنا إخراج ما بداخل المتغير email‏ من خلال الدالة $_GET‏ ثم أغلقنا كود البي اتش بي. 


التطبيق : نفتح من خلال المتصفح صفحة welcomel.php‏ في مجلد get‏ من السرفر وطبعا ستظهر كما في الشكل التالي بعد اضافة الاسم والايميل 
كمثال : 


Name: zi يوسف‎ 
E-mail: email@yahoo.com 


إرسال | 


بعد الضغط على الزر ارسال ستقوم الصفحة بإرسال البيانات الى الصفحة الثانية welcome.php‏ واستدعائها لأخذ البيانات وهي بدورة ستقوم بتنفيذ 
النقل للبيانات كما كتبنا الكود بواسطة GET‏ .$ وسيكون شكلها بعد ضغط زر الارسال كالتالي : 


Welcome zle يوسف‎ 
Your email address is: email; yahoo.com 


: البيانات التي قمنا بإدخالها ظهرت ضمن الرابط كما في الصورة‎ $. GET Alla أيضا كيف يظهر الرابط عند استخدام‎ Ba y 


localhost/web1/get/welcome.php?name- يوسف + صالح‎ 8: email -email?640yahoo.com Û 


$_POST alla 


يتم إرسال البيانات من الفورم إلى صفحة أخرى عن طريق دالة $ POST.‏ وتكون البيانات غير مرئية للمتصفح عكس دالة GET‏ $ لدينا المثال 
التالى: 


نطبق على المثال السابق فقط نغير بدل (get)‏ في صفحة welcomel.php‏ كما في الكود التالي: 


«form action-"welcome.php" method-"post"-» 
Name: «input type="text" name-"name"»«br» 
E-mail: «input type="text" name-"email"»«br» 
«input type-"submit"» 

</form> 
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كما في السطر ۷ قمنا بتغيير الخاصية method‏ إلى post‏ . وفي الصفحة welcome.php‏ نقوم بتغيير الدالة نفسها من GET‏ $ إلى الدالة 
$_POST‏ كما في الصورة التالية: 


7 Welcome <?php echo $ POST["name"]; ?»«br» 
8 Your email address is: «?php echo S POST["email"]: ?» 
9 


«body» 


كما تلاحظ الصورة تم تغيير الدالة وسيكون التطبيق بنفس التطبيق للمثال السابق وسيكون شكل الرابط بعكس GET Alla‏ $ أي لن تظهر البيانات في 
الرابط . Bay‏ الصورة: 


zs localhost/web1/get/welcome.php D | ' > 


لم تظهر البيانات التي أدخلناها في الصفحة المستقبلة لبيانات الفورم وظهر اسم الصفحة فقط .welcome.php‏ 
تطبيق حسابي باستخدام الدوال والكورم 


سنقوم بعمل تطبيق لعملية حسابية عن طريق الفورم الذي تعلمناه والتطبيق يقوم بعمل جمع ارقام يقوم المستخدم بإدخالها وتقوم الدالة POST‏ $ أو 
Jas $ GET‏ التطبيق الحسابي وإخراج النتيجة والطريقة كالتالي: 


اولا: نقوم بعمل مجلد جديد داخل مجلد www‏ ونسميه application‏ . نقوم بإنشاء صفحة بي اتش بي add.php‏ ونقوم بعمل الكود التالي بداخلها. 


«form action-"add2.php" method-"get"» 
أدخل الرقمين لعملية الجمع‎ 


number 1: «input type-"num" name-"num1" /» 
number 2: «input type-"num" name-"num2" /» 
«input type-"submit" /» 

</form> 


كما تلاحظ قمنا بعمل فورم لعملية الجمع ووضعنا خاصية الأكشن action‏ للتوجه لصفحة أخرى وهذه الصفحة تقوم بعملية سحب البيانات والقيام 
بعملية الجمع» حددنا اسم الصفحة وهي add2.php‏ سنقوم بعملها في الخطوة التالية. في السطر ^ عمل نص عادي والسطر ٩‏ عمل سطر جديد» في 
السطر ٠١‏ نص عادي في البداية وسميناه :1 number‏ اشارة للرقم الاول ثم بدأنا بعمل حق من نوع num‏ وليس نصء وحددنا اسم للحقل وهو 
num‏ وهي الخاصية التي نتعامل معها في نقل القيم Laiha‏ من خلال الاسم. وسيكون الشكل كما في الصورة: 


أدخل الرقمين لعملية الجمع 


number 1: number 2: | إرسال‎ | 


ثانيا : نقوم بعمل الصفحة add2. php‏ ونقوم بعملية جلب المتغيرات للحقول والقيام بعملية الجمع كما في الكود التالي: 
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التتيجة 

<br /> 

<?php 

$a -$ GET["num1"]; 
$b -$ GET["num2"]; 


Sresult- 53 + Sb; 
{ 
echo $result; 


في الكود أعلاه في السطر V‏ عمل نص عادي وكتبنا (النتيجة) وعمل سطر جديد في السطر A‏ في السطر ٩‏ بدأنا بعمل كود بي اتش بي .في السطر 
٠‏ عملنا متغيرين هما $a‏ و $b‏ وكل متغير استخدمنا فيه عملية جلب للبيانات او القيم من خلال الدالة GET‏ $ فمثلا المتغير $a‏ استقبل البيانات في 
المتغير num‏ »والمتغير $b‏ كذلك استقبل القيمة في num2‏ . 


في السطر ١‏ عملنا متغير وسميناه $result‏ ومعناه نتيجة وجعلناه يحتوي مجموعة $a‏ و $b‏ وداخل القوسين في سطر ٠١‏ طلبنا إخراج النتيجة 
($result)‏ والتي تحوي مجموع المتغيرين. وأغلقنا البي اتش بي في سطر AA‏ 


نأتي للتطبيق ونضع الرقمين 7٠٠١‏ و ٠٠١‏ ونطبق على صفحة add.php‏ كما في الصورة : 


أدخل الرقمين لعملية الجمع 


number 1: 200 number 2: 250 | إرسال‎ 


نضغط على زر ارسال وستظهر النتيجة التالية كما في الصورة : 


MySQL and phpMyAdmin 


Structured Query ) SQL نظام مفتوح المصدر ومجاني لإدارة قواعد البيانات العلائقية ويستخدم لغة الاستعلام الهيكلية‎ : MySQL 
اللغة الأكثر أهمية في إدارة ومعالجة محتوى قاعدة البيانات.‎ SOL, وتعتبر‎ (Language 


قواعد بيانات علائقية: وتعني جداول مترابطة بواسطة علاقات (relations)‏ عن طريق مفاتيح رئيسية للجداول. 


سنتعلم هنا طريقة عمل قواعد بيانات وجداول وطريقة إدخال وتعديل البيانات بداية من phpmyadmin!‏ ثم نقوم بتعلم كيفية إدخال البيانات وتعديلها 
وحذفها من خلال البي اتش بي وإنشاء مواقع تفاعلية تعمل بال بي اتش بي وقواعد البيانات mysql‏ . 


ماهو phpmyadmin‏ : هي اداة مفتوحة المصدر ومجانية تتيح لمدراء المواقع الالكترونية لإدارة قواعد بياناتهم (mysql)‏ 
الواجهة الرئيسية ل phpmyadmin‏ 


نقوم بتشغيل برنامج wampserver-!‏ حتى تظهر الأيقونة الخاصة به في الشريط السفلي لسطح المكتب باللون الأخضر. ونقوم بفتح localhost‏ 
ايضا على المتصفح كما في الصورة التالية: 
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Version 2.2 Version Francaise 


Server Configuration 
Apache Version: 2.2.22 


PHP Version : 5.3.13 


Loaded Extensions : $ Core di bcmath $È calendar die com dotnet de ctype 
die date de creg de filter طق‎ ftp die hash 
3F iconv 3F json die mcrypt HF SPL die odbc 
de pcre 3F Reflection die session die standard die mysalnd 
3F tokenizer Š zip di zlib 3F libxml die dom 
$ PDO die Phar de SimpleXML die wddx de xmi 
die xmireader di xmlvriter 3¥ apache2handler die mbstring de od 
de mysql $ mysqli d pdo mysql di pdo_sqlite die mhash 
di xdebug 


MySQL Version : 5.5.24 


Tools 
# phpinfo() 
# phpmyadmin 


Your Projects 
Lj another 


C applicatio 


من خلال الصورة أعلاه ستلاحظ على اليسار تحت عنوان Tools‏ وجود رابط phpmyadmin-‏ نقوم بالضغط عليه وفي بعض الحالات يطلب اسم 
مستخدم وكلمة مرور كما في الصورة التالية : 


phpMyAdmin 
phpMyAdmin أهلا بك في‎ 


iu Language 


Arabic M‏ - العريية 


root 


في حالة تم ظهور الصورة اعلاه نختار اللغة العربية ونضع اسم مستخدم (root)‏ ثم نترك كلمة المرور فارغة ونضغط على زر (انطلق) وستظهر 
الصورة التالية للوحة التحكم الخاصة (phpmyadmin)‏ علما أن كلمة المرور واسم المستخدم الذي وضعناها هي افتراضية تأتي في أي برنامج 
سرفر محلي مالم نتدخل ونقوم بتغييرها. 
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| phpMyAdmin 


4^ و 6ه ¢ 1 3] قاعدة ييادات 13[ Users 4 ttc] sa‏ 59 لل تصدير G‏ استيراد 7ی الإعدادات 89 ترامن | |i ede‏ إستتساخ D]‏ متغيرات | 35 مجموعات المحارق طبه محركات 


General Settings 
3 ... (الجداول الأخيرة)‎ 


(localhost (localhost via TCPAP za. + | utf8_general_ci v | = @ Serer connection collation ك‎ 8 
Software: MySQL ٠ E) 
(Software version: 5.5.24-log - MySQL Community Server (GPL e (a) t 


10 نسخة البروتوكول:‎ ٠ - 9 
root()localhost المستخدم:‎ e Appearance Settings 
@ eg 


Server charset: UTF-8 Unicode (utf8) « 


| العربية‎ - Arabic v | تعد‎ -Language ها‎ : & "e 
3 
e 1 i 
8 82% | mU (3 is 


Apache/2.2.22 (Win32) PHP/5.3.13 ٠ 


Database client version: libmysql - mysqlnd 5.0.8-dev - 20102224 - e M " ^ [aj لا‎ 
$ Sid: 65fe78e70ce53d27a6cd578597722950e490b0d0 ore settings 


@ PHP extension: mysqli e 


(a) rmation schema 


la) 
w nla4u 
phpMyAdmin 0 © x 
zJ T ES ا‎ w a 
4.1.8 آخر إصدار مستقر:‎ Version information: 3.5.1 e 
كه ه مستتدات وتائقية‎ ghreb 
ويكي‎ ٠ w bz 
phpMyAdmin الصتحة الرئيسية الرسمية ل‎ e ها‎ sq 
مشاركه‎ e 
اجلب دعم‎ o w 
قائمة التعديلات‎ e at 
(a) at 


كما تشاهد الصورة اعلاه وحسب تم الترقيم باللون البنفسجي للصورة لشرح وظيفة الأزرار الموجودة والاكثر استخداما فكما تشاهد الصورة وحسب كل 
رقم : 


(قاعدة بيانات) : من خلال هذا الزر والضغط عليه يتم ظهور الصفحة الخاصة بعرض قواعد البيانات الموجودة ضمن السرفر لديك في جهازك وايضا في 
السرفر الذي سيتقوم برفع موقعك عليه في الانترنت وتظهر الصفحة كما في الصورة التالية: 


localhost E 


@ قاعدة بيانات  SQL[S‏ | الحالة | 031m) | RR | Users‏ | هى الإعدادات | ® ترامن | ]سيل تناني | |l‏ إستنساخ | ci uA]‏ | = مجموعات المحارف | (d‏ محركات 


قاعدة بيانات 


- 


© Create database ها‎ 


(assis) | utfü. bin "| | 


Master replication a قاعدة اليياتات‎ 


كما تلاحظ الصورة اعلاه من خلال المربع او الحقل الموجود تحت (create database)‏ نضع اسم قاعدة البيانات التي نريدها بداخله ونختار من 
الخيارات المنسدلة بجانبه في حالة بناء قاعدة بيانات باللغة العربية على خيار أو الترميز (utf8, bin)‏ 


(SQL)‏ من خلال هذا الزر او الرابط تتيح Ul‏ الصفحة عمل ادارة لقواعد البيانات بكاملها محتواها ولكن عن طريق استعلامات SQL‏ وهذه 
الاستعلامات تكتب يديويا فمثلا لو Ua jj‏ عمل عمل قاعدة بيانات اسمها 50190011 نقوم بكتابة استعلام SQL‏ كالتالي: 


CREATE DATABASE schooll ; 


ونكتبه في المربع الظاهر في الصورة ثم نضغط زر تنفيذ aga gall‏ تحت المربع الخاص بالاستعلام على اليسار: 
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3( قاعدة ييانات | s—R | Users 52 | uag | SQUE]‏ | )3:31 | 4( | ترامن | D £e I dada‏ متغيرات | ES‏ مجموعات المحارف | بإ محركات 


© :"Run SQL query/queries on server "localhost 


; CREATE DATABASE schooli 


Clear 


v [ ;| Delimiter ]‏ عرض هذا الاستعلام هتا مرة أخرى |_| Retain query box‏ 


(All)‏ : وتعرض عليك العمليات التي تمت واحصائيات بذلك اضافة لحالة السرفر من تناقل للبيانات وغيرها .علما اننا لا نستخدمها في Le‏ عند 
انشاء المواقع الالكترونية. 


:(Users)‏ عرض المستخدمين للسرفر والمتاح لهم الوصول لقواعد البيانات » في اجهزتنا الخاصة لا نقوم بعمل مستخدمين ونتركها كما هي الغالب 
حيث ان المستخدم الافتراضي هو (root)‏ وكلمة السر لا توجد. ونستخدم الصلاحيات من اسماء وكلمات مرور في السرفرات عند أطلاق المواقع 
الالكترونية وربطها بقواعد البيانات وسنتعلمها عن رفع المواقع في الفصول القادمة ان شاء الله. 


(تصدير): من هنا نقوم بعمل إخراج قاعدة بيانات كاملة بجداولها ولا نستخدمها الا بعد نهاية عملنا للموقع نقوم بتصدير او اخذ ملف كامل في قاعدة 
البيانات لنقوم بنقله لسرفر على الانترنت أو حتى الى جهاز آخر. 


(استيراد): الاستيراد عكس التصدير وهو لعمل استيراد وجلب لقاعدة بيانات موجودة كملف وهو مانقوم به في السرفر على الانترنت من جلب الملف 
الخاص بقاعدة البيانات عند آخذها من جهاز آخر. 


(الاعدادات): وهنا يمكن عمل تعديلات معينة على phpmyadmin‏ وتصديرها واستيرادها والمزيد من الاعدادات ولا نستخدمها بكثرة في أعمالنا. 
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عمليات phpmyadmin‏ 
إذ شاء قاعدة بيانات 


نقوم بإنشاء قاعدة البيانات من خلال phpmayadmin‏ بالضغط على ( قاعدة بيانات ) ونقوم بعمل اسم لقاعدة البيانات واختيار الترميز المناسب 
للمحتوى والذي سيكون بالغة العربية كما في الصورة : 


)3( قاعدة بياتات | [لل 501 | agh‏ | |52 5615لا | ] تصدير | لإ استيراد | 5( | ترامن | ل سيل تتاتي £u Il‏ >{ متقيرات 


قاعدة بيانات 


© Create database ها‎ 


utf8 bin Y chool1‏ | ( تكوين 


قاعدة Master replication a =W=‏ 
بعد وضع الاسم لقاعدة البيانات واختيار الترميز (utf8 bin)‏ نضغط على زر (تكوين) وستظهر UI‏ رسالة خضراء بنجاح عملية إنشاء قاعدة البيانات 
(schooll)‏ كما في الصورة: 
قاعدة بيانات 


© Create database ها‎ 


v | school1 


Master replication a قاعدة اليياتات‎ 


م3 يم مستتسخة az‏ تحقق من ! 


الان لدينا قاعدة بيانات اسمها (school1)‏ يمكن مشاهدتها ايضا من خلال زر قاعدة البيانات وستظهر اسفل حقل انشاء قاعدة البيانات وعلى الجانب 
phpmyadmin- c!‏ والاستعلام SQL‏ الخاص بإنشاء قاعدة بيانات كالتالي: 


CREATE DATABASE school; 
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إنشاء جدول في قاعدة البيانات 


بعد أن أنشأنا قاعدة بيانات ستحوي قاعد البيانات على جداول حسب احتياج الموقع فمثلا سنقوم بعمل جدول ونسميه (students)‏ 


لو افترضنا أن لدينا هذا الجدول : 


جدول الطلاب 

الرقم الاسم جوال العنوان ملاحظات 
١‏ صالح علي te9۸4‏ اليمن — امانة العاصمة لا يوجد 
seul o ———  ÉÓáel —— dem Aes Y‏ 
Y‏ اوو ا اا ا 

£ للححصنت :اا Jw LL‏ ا 


وطريقة إنشاء الجدول من خلال phpmyadmin‏ كالتالي: 


من خلال زر (قاعدة بيانات) ستظهر لنا قواعد البيانات تحت حقل انشاء قاعدة بيانات وستظهر لنا قاعدة البيانات (schooll)‏ نضغط عليها وستظهر 
الصفحة التالية كما في الصورة: 


phpMyAdmin 


Trggers2ó | i) — Routines  تاریتمإا عمليات | 1ھ‎ g | إكا استيراد‎ p 1 A sag e 
© © B ® 
لا توجد جداول في قاعدة البيانات هذه!‎ 
أتشئ الجدول‎ 3 x (الجداول الأخيرة)‎ 
school1 M 


الاسم :Number of columns‏ ] ا 


لا توجد جداول في قاعدة البيانات هذد! 


Create table © 


من خلال الصورة أعلاه وتحت عنوان (انشئ جدول) في الحقل (الاسم) نكتب اسم الجدول (student)‏ ثم المربع بعد النص المكتوب Number of‏ 
5 وتعني عدد الأعمدة. لوعدنا للجدول أعلاه وأحصينا عدد الاعمدة سنلاحظ أنها ه اعمدة وهي Ry‏ — الاسم — الجوال — العنوان — 
ملاحظات ) نكتب ه في الحقل وكما في الصورة: 

3 أتشئ الجدول 


5| :Number of columns student | الاسم:‎ 


من خلال الصورة أعلاه كتبنا اسم الجدول وعدد الاعمدة نقوم بعد ذلك بالتنفيذ وذلك من خلال زر (تنفيذ) وستظهر رسالة باللون البرتقال بنجاح العملية 
وستفتح لنا صفحة أخرى لإضافة أسماء الأعمدة و خصائص كل عمود ايضا كما في الصورة. 
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Add column(s اسم الجدول:‎ h 
TN: z] د دام‎ xe phpMyAdmin 
|.» 92 
9) e © 1 © ها‎ 2 
-= A I غهرست‎ g الحواص‎ Collation O الطول / القيمة رن إقتراضي‎ Oes الاسم‎ = — 
(الجداول الأخيرة)‎ 
school1 3 
3 — 5 . i Bone 5 INT, den لا توجد جداول في قاعدة البيانات‎ 
z — M M v None d INT Create table © 
Y 59 M id M None Y, INT 
Y T M d a None E INT 
:Collation © :Storage Engine تعنيقات الجدول:‎ 
utf8 bin v E InnoDB 


û; :PARTITION definition 


كما نلاحظ الصورة تم طلب اسماء الأعمدة مع مواصفاتها ونسرد الان مواصفات كل عمود كتابيا ثم ننقلها للجدول (للتوضيح): 


العمود الأول ( الرقم ) وهو أهم عمود في كل الجداول ونسميه (المفتاح الرئيسي (Primary Key‏ وعن طريق المفاتيح الرئيسية ترتبط جداول قواعد 
البيانات مع بعضها بالإضافة إلى أن قواعد البيانات لا يمكن أن تتخلى عن المفتاح الرئيسي للجداول وهو مهم جدا يفيد في عمليات قواعد البيانات كما 
سنتعلمها لاحقا. 


العمو الثاني(الطالب) وهو عبارة عن نص عادي وسنحدد حجمه (عدد الحروف) في الجدول. 
العمود الثالث (الجوال) وهو عبارة عن رقم وسنحدد خصائصه ايضا في الجدول. 

العمود الرابع (العنوان) وهو عبارة عن نص وارقام وسنحدد خصائصه في الجدول ايضا. 
العمود الخامس(ملاحظات) وهو عبارة عن نص طويل لأني ملاحظات وسنحدد حجم النص. 


كما في الصورة أدنا عملنا خصائص الأعمدة : 


(Add column(s اسم الجدول:‎ h M Admin 
Ea 1 t student pM y. 
4 
AY © 5 © $1 
فهرست ۸_1 تعليقات‎ g الخواص‎ Collation إقتراضي ن‎ DELIA Qes الاسم‎ ee 
(الجداول الأخيرة‎ 
* 
n PRIMARY Y, v v None a v INT number 
school v 
y. ست‎ x 5 * None 55 5 VARCHAR name جداول في قاعدة البيانات هذه!‎ ae الا‎ 
v --- X v M None 14 v INT mobile Create table © 
zs "- r r v. None 66 x VARCHAR address 
A^ --- x v v None 100 v VARCHAR note 
Collation û :Storage Engine تعليقات الجدول:‎ 
utf8 bin M v InnoDB 


0 :PARTITION definition 


في الصورة أعلاه العمود الأول على اليمين تحت (الاسم) مطلوب أسماء الأعمدة قمنا بكتابة اسم العمود الأول (number)‏ ويعني الرقم ثم اخترنا انوع 
(INT)‏ وتعني عدد صحيح» ثم الطول وكتبنا (4) بافتراض ان يصل الرقم الى اربعه ارقام ثم تركنا الخواص التي تليها كما هي وهي (افتراضي - 
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collation -‏ - الخواص - خالي) وصلنا لخاصية فهرست حددنا (PRIMARY)‏ وتعني مفتاح رئيسي وان يكون لكل طالب رقم خاص به لايتكرر 
أبدا. ثم اشرنا بعلامة صح تحت (A. T)‏ وتعني زيادة الرقم اتوماتيكي بمعني اذا اضفن اسم جديد يضاف رقمه بالترتيب من دون تدخل مناء وتركنا 
الخاصية (تعليقات). 


العمود (name)‏ ويعني الاسم حددنا نوعه (VARCHAR)‏ وتعني نص .ثم الطول وحددنا (55) اي عدد الأحرف والارقام تركنا بقية الخواص. 
العمود (mobile)‏ ويعني الجوال ثم حددنا النوع (ENT)‏ ويعني رقم وحددنا الطول ١‏ رقم وتركنا بقية الخواص. 
العمود (address)‏ ويعني العنوان حددنا النوع (VARCHAR)‏ وتعني النص وحددنا الطول 75 حرف وتركنا بقية الخواص. 


العمود (note)‏ ويعني ملاحظة حددنا النوع (VARCHAR)‏ وتعني gail‏ وحددنا طول الحروف ٠٠١‏ وتركنا بقية الخواص. علما ان الطول للقيم 
حسب تقييم الشخص تقيم مثلا الاسم كما يحتاج لحروف ورقم الجوال كم يحتاج لعدد ارقام وهكذا. نصل اخر ثلاثة حقول لا نضيف الا الحقل الاخير على 
اليسار Collation‏ ونختار utf8. bin‏ . بعد الانتهاء نقوم بالضغط على زر (Bia)‏ وسيظهر الجدول كما في الصورة: 


phpMyAdmin 


Triggers 35 x (€) Routines f | الإمتيازات‎ a cune (5 | استيراد‎ (L) | guo بحت استعلام يواسطة منال‎ 4 | sa y 
© 4© ها‎ ® 
حجم الحمل الزائد‎ Collation تيع‎ Q صفوف‎ ida a dja 
z كيلويايت‎ 16 (Qtf8 bin InnoDB ° حذنف‎ © EJI mE € انتعراض إإإ بناء‎ student T 
5 - .. (الجداول الأخيرة)‎ 
يايت‎ 0 Gos 16 utf8 bin InnoDB ° جدول (جداول) المجموع‎ 1 
school1 Y 
r تحديد الكل / إلغاء تحديد الكل مع المحدد:‎ 4 


كالتالي:501تعليمة اضافة جدول بواسطة 


CREATE TABLE student 
( 


number int(4), 


name varchar (55), 
mobile int(14), 
address varchar(66), note varchar(100) 


5 
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إضافة بيانات Aaga)‏ إلى الجداول 


يتم إضافة بيانات إلى الجداول عن طريق phpmyadmin‏ ثم اختيار قاعدة البيانات التي نريد الضافة لها مثلا (school)‏ ستظهر كما بالصورة التالية: 


phpMyAdmin 


Triggers 35 xa )© | Routines ex a mune J^ a jg | بحث استعلام بواسطة مثال‎ sap ey € e 4 
i $ 
الحمل الزاند‎ aaa Collation تيع‎ Q العملية صقوف‎ a dja 
2 كيلويايت‎ 16 utf8 bin InnoDB ° غ إدخال هك إفراغ © حذف‎ 34 dj [E student 7 
: ... (الجداول الأخيرة)‎ 
يديت‎ 0 Goes 16 utf8 bin InnoDB 9 جدول (جداول) المجموع‎ 1 
school1 0 


كما في الصورة أعلاه ستلاحظ اسم الجدول (student)‏ ولإدخال البيانات نقوم بالضغط على إدخال وستظهر نافذة ادخال البيانات كما في الصورة: 


school1 © « localhost C7? 


Triggers 35 — — )© | Routines | الإمتيازات‎ a | تصدير | [2 استيراد | ^( عمليات‎ o بحت استعلام يواسطة منال‎ 4 sa) y 
إدخال الجدول‎ x a dg 
n m 9 | استعراض‎ EJ student 
- عمود توع‎ a 
- 1 
- (int(4 number | d 
تحديد الكل / إلغاء تحديد الكل‎ p 
7 r (varchar(55 name 
يوسف صالح على‎ 
قاموس السا‎ B هم عرض تسخة للطباعة‎ 
m (int(14 mobile - 
123456789 أنشئ الجدول‎ AA 
—— : m (varchar(66 address 
اليمن - صتعاء - امانة العاصسمة‎ | | 
الاسم:‎ 
5 (varchar(100 note 
-— xum 
( ai ) 
| 
تجاهل‎ @ | 
T | القيمة‎ m Aja توع‎ m 
r (int(4 number 
m (varchar(55 name 
m (int(14 mobile 
9 (varchar(66 address 
گغاء‎ 
EZ 


لاحظ كما في الصورة بعد الضغط على ادخال تظهر النافذة السابقة الصف الأول يطلب number‏ وهو الرقم وتركناه فارغ لأننا قمنا اعدادات بإضافته 
اتوماتيكاء الصف الثاني طلب الاسم name‏ وكتبنا (يوسف صالح (ode‏ في الصف الثالث من الفورم طلب رقم الجوال mobile‏ وحددنا TOR‏ في 
الصف الرابع طلب العنوان address‏ وحددنا العنوان» في الصف الخامس طلب ملاحظات واضفنا ملاحظة. 


بعد الانتهاء نضغط على زر تنفيذ. يمكننا هنا ان نظيف اكثر من صف لاحظ المربعات او الحقول في الاسفل › او الاكتفاء بإضافة صف واحد ونضغط 
على زر تنفيذ. 
تعليمة اضافة البيانات السابقة للجدول بواسطة SQL‏ كالتالي: 


INSERT INTO student(name ,mobile,address,note) 
VALUES ,يوسف صالح علي)‎ I Y £0 1 VA 4, :(ملاحظا ت,اليمن — امانة العاصمة‎ 


تم عمل كود sq]‏ أعلاه وتعمل على ادخال القيم الى الجدول .قمنا بعمل استعلام (INSERT INTO)‏ ومعناه ادخال إلى الجدول (student)‏ ثم ذكرنا 
الأعمدة التي نريد الادخال لها بالترتيب» بعد ذكر الأعمدة نذكر البيانات الاسم والجوال والعنوان والملاحظات حسب الترتيب للأعمدة. 
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تعديل وتحديث فى قاعدة البيانات 


للتعديل البيانات عن طريق phpmyadmin‏ بواسطة الخطوات السابقة فتح قاعدة بيانات 50110011 ثم الضغط على الجدول student‏ وستظهر كما 
بالصورة: 
note address mobile — name number + [ ¬+‏ 
اسا کے تعديل غچ نسح © حتف 2 يوسف me‏ علي 123456789 اليمن - صنعاء - ia‏ العاصمة دورة المواقع الالكترونية 
؟__ تحديد الكل / إلغاء تحديد الكل مع المحدد. ى تغير ص pg‏ 


Start row: 0 | Number of rows: 30, Headers every 100| rows : عرض‎ 


كما تلاحظ أعلاه تظهر صورة لجدول student‏ والبيانات التي بداخلة ويمكننا التعديل بالضغط على ايقونة او رابط تعديل امام اي بيانات المراد التعديل 
عليها وبعد الضغط على التعديل ستظهر النافذة التالية : 


phpMyAdmin 


Triggers 35 ى عمليات‎ gu B) mag ji | يحت‎ @ saf a | استعراض‎ [E 


— : © © 3 2 
القيمة‎ ga عمود توع دالة‎ 
(int(4 number 
2 M 0 " ... (الجداول الأخيرة)‎ 
—— m (varchar(55 name school = 
5 (int(14 mobile student | | 
123456789 


(varchar(66 address cals hie 


(varchar(100 note 


كما تلاحظ ظهرت البيانات ويبقى علينا تعديل ما نريد وبعد الانتهاء الضغط على زر (تنفيذ). 
تعليمة SOL‏ لتعديل وتحديث بيانات في جدول: 
UPDATE student‏ 


SET name=' dug jnobile-'1122334455' 
WHERE numberz'1'; 


كما تلاحظ تعليمة او استعلام SQL‏ بواسطة UBPDATE‏ يمكنك تعديل أي بيانات في الجدول وبالطريقة السابقة في السطر الأول كتبنا استعلام 
التعديل ثم اسم الجدول» في السطر الثاني كتبنا العمود الذي نريد التعديل فيه وهو الاسم name‏ ثم علامة يساوي ثم الاسم الذي نريد وضعه بدل السابق 
وكما تلاحظ فلابد من وجود الفواصل (,) وايضا علامة التنصيص كما في الاستعلام. ثم العمود الخاص بالجوال وذكرنا اسم العمود ثم علامة يساوي ثم 
بين علامتي تنصيص الجوال الجديدء وهكذا مع اي عمود نريد تعديله. في السطر الاخير وهو مهم جدا الاشارة الى رقم الصف المراد تعديله بحيث طلبنا 
شرط WHERE‏ ومعناه بحيث أو بشرط ثم نكتب الشرط وهو numberz-'1'‏ وهو أن الرقم للصف هو رقم واحد. هنا سيتم التعرف على الصف 
وتعديله كما نريد. 
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حذف صف أو بيانات من الجدول 


لحذف بيانات او صف من قاعدة بيانات ومن جدول بالتحديد فعن طريق phpmyadmin‏ نفتح localhost‏ ثم phpmyadmin‏ ثم قاعدة بيانات 
فنختار قاعدة البيانات ولتكن 50120011 ثم نحتار الجدول student‏ ستظهر لنا كما في الصورة: 


+ خيارات 
note address mobile name number + [+ z‏ 
O‏ تحديل agi‏ @ حنف 2 يوسف صالح علي 123456789 اليمن - صتحاء - اماتة العاصمة دورة المواقع الالكتروتية 


^ تحديد uum‏ الكل مع المد Q ae‏ ] تصدير 
من خلال الصورة تظهر ايقونة الحذف الحمراء امام كل صف فمن خلالها يمكن حذف اي صف. كما يمكن التأشير على الصفوف بعلمة صح في الطرف 
الأيمن والحذف من اسفل الفورم. 
تعليمة الحذف في SQL‏ 


DELETE FROM student 
WHERE number-'l'AND namez'£la cia g; 


كما تلاحظ أعلاه تم عمل استعلام لحذف سجل او صف في جدول معين بواسطة تعليمة ) (DELETE FROM‏ ثم نكتب اسم الجدول وهو student‏ ثم 
ننتقل للشرط وهو (WHERE)‏ ثم عنصر الشرط نفسة وكتبنا الرقم number‏ بأن يساوي '1' وسيقوم بحذف السجل كامل للرقم واحدء ثم أضفنا 
شرط آخر ويمكننا الاستغناء عنه بعد تعليمة (AND)‏ وهو الاسم name‏ يساوي "يوسف صالح" ثم الاغلاق بفاصلة منقوطة. 
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MYSQL za PHP ربط‎ 


نصل هنا إلى أهم الخطوات في انشاء المواقع الالكترونية وهو كيفية إدخال البيانات من الفورم الذي تعلمنا إنشاءه HTML-A‏ مع البي اتش بي 
والخزن البيانات في قاعدة البيانات الذي تعلمنا انشائها ايضا. تعتمد عملية ربط قاعدة البيانات مع صفحة البي اتش بي على عدة ادوات تعلمنا الجزء 
الأكبر منها والأهم وهي (الفورم — وجود قاعدة بيانات - دوال (ái‏ البيانات - عمليات الاستعلام SQL‏ - التنسيق بشكل عام ). سنأخذ هنا كيفية إدخال 
البيانات إلى قاعدة البيانات. 


إدخال البيانات بواسطة INSERT‏ 


لتعلم كيفية إدخال البيانات سنقوم بعمل فورم فيه طلب لبيانات جدول الطالب الذي أنشأناه مسبقا في phpmyadmin-l‏ الموجود في قاعدة بيانات 
1. والخطوات العامة هي (أولا :عمل مجلد جديد وليكم اسمه php mysql‏ أو اي اسم ثم عمل فورم الإدخال في صفحة php‏ ولتكن 
insert.php‏ ثانيا :عمل iaia‏ أخرى سنسميها مثلا insert process.php‏ تستقبل عبر الدوال البيانات وتقوم بعملية الاستعلام SQL‏ لإدخال 
البيانات إلى قاعدة البيانات ) 


الخطوات بالتفصيل: 


الخطوة الأولى: نقوم بعمل الفورم اللازم لإدخال البيانات من خلال الصفحة التي سننشئها وهي insert. process.php‏ وسيكون الكود كما في الشكل: 


23 <body> 

2 «center»«b»4 Lh! أدخل بياتات‎ </center> 

25 «div class-"student"» 

2 «br /» 

27 «form action-"insert process.php" method-"post"» 
28 إسم الطائلب|‎ 

29 «input type="text" name-"name"»«br /< 

الجوال 30 

31 «input type-"number" name-"mobile"»«br /» 

العتوان 32 

33 «input type-"text" name-"address"»«br /» 

ملاحظات 34 

sim «input type="text" name-"note" value-"3SLhs-jia"»«br /» 


36 
8 
8 


«input type-"submit"» 
«/form» 
«/div» 
«/body» 


C‏ یں 


[In] 
i 


كما تلاحظ الفورم داخل منطقة (body)‏ ومحتواه الحقول (الاسم — الجوال - العنوان — ملاحظات ( تعلمنا سابقا كيفية عملة وشرحنا اساسياته » 
نلاحظ في سطر ۲۷ حددنا الاكشن واتجاه انتقال البيانات وهي للصفحة المحددة بعد الضغط مباشرة على زر submit‏ »كما نلاحظ في سطر yo‏ 
استدعينا كلاس تم انشاءه مسبقا لعمل تنسيق للديف الذي يحتوي الفورم لتنسيق الفورم ويكون اكثر وضوحا والكلاس محلي وضعناه في منطقة 
(head)‏ وهنا ليس معناه اننا نقوم في لغة بي اتش بي بوضع الكلاس ضمن راس الصفحة ولكن فقط هنا للمثال ويجب ان تعتمد على ملف CSS-!‏ 
دائما في الأعمال وسيكون الكلاس كالتالي : 
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«style type="text/css"> 


9 . student { 
10 margin:0 auto; 
11 width: 400px; 
12 direction:rtl; 
color:£C00; 


font-family:"Times New Roman", Times, serif; 
font-weight:bold; 
font-size:16px; 
border: solid £990 1px; 
border-radius:3px 3px 3px 3px; 
padding:4px 4px 4px 4px; } 
«/style» 


وسيكون شكل الموقع او الفورم داخل الديف كما في الصورة : 


أدخل بيانات الطالب 


كما تلاحظ الفورم أعلاه بشكل منسق بنسبة %٦ ٠‏ وسيأتي فيما بعد في التطبيق النهائي لكيفية التنسيق الدقيق للفورم بشكل عام وننتقل للخطوة الثانية. 


الخطوة الثانية : نقوم بعمل صفحة insert. process.php‏ والتي ستحوي دالة استقبال البيانات من الفورم وعملية الاتصال بقاعدة البيانات وعملية 
الاستعلام الخاصة بإدخال البيانات للجدول والكود كالتالي: 


$con= mysqli_connect ("localhost","root","","schooli"); 

// Check connection 

if (mysqli connect errno()) 
1 
echo "Failed to connect to MySQL: " . mysqli connect error(): 
) 


$name- S POST['name']; 
$mobile-S$ POST['mobile']; 
Saddress-$ POST['address']; 
$note-$ POST['note']; 


20 

21 S$sql-"INSERT INTO student (name, mobile, address, note) 
22 VALUES ('$name','$mobile', 'Saddress','$note' )"; 

24 mysqli query ($con, $sql); 

:"تمت الاضاقة يتجاح" echo‏ انث 

26 

"AME mysqli close(Scon):; 

28 ?» 

FE </body> 


قبل الدخول في شرح الكود نلاحظ في تقدمنا في تعلم لغة البي اتش بي كبر حجم الكود لكني أنبه هنا إلى أن الكود مهما كبر فهي عمليات بسيطة تعلمناها 
مسبقا نقوم بدمجها وربطها للتكامل مع بعضها ونحتاج هنا الى تركيز وترتيب هذه الاكواد فقط, 


في سطر ٩‏ قمنا بعملية الاتصال بقاعدة البيانات اولا قبل اي ادخال او اخراج منها. قمنا بعمل متغير وسميناه Scon‏ ثم ادرجنا بداخله دالة الاتصال 
وصورتها العامة mysql("'server host" ," user," password ',"database')‏ حيث server host‏ هو السرفر المستضيف لملفات موقعك 
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وقاعدة بياناتك والسرفر الذي يحوي قاعدة البيانات الخاص بنا هو Jocalhost‏ كما تلاحظ في الكود ثم user‏ وتعني اسم المستخدم الخاص بالسرفر 
لكي نستطيع الوصول لقاعدة البيانات فوضعنا اسم المستخدم AY root‏ موجود فيه مسبقا وهي افتراضي في أي برنامج سرفر ثم password‏ وجعلناه 
في الكود فارغ لأنه لم نعين في السرفر الذي نعمل عليه اي كلمة مرور للمستخدم فتركناها فارغة. ثم database‏ وهنا نضع اسم قاعدة البيانات 
فوضعنا اسم القاعدة التي نعمل عليها وهي School1‏ . 


في السطر١ ١‏ استخدمنا دالة الفحص او الخطأ mysqli connect, errno()‏ وهذه الدالة موجودة ضمن برمجيات السرفر تقوم بعملية فحص ما اذا 
كان هناك اي خطأ في عملية الاتصال ورقم الخطأ وضعنا هذه الدالة في تعليمة شرط. والغرض من ذلك تنبيهنا الى وجود الخطأ واعلامنا بمكانه إن وجد. 
ومعنى الدالة في داخل الشرط هو (في حالة كان هناك خطأ تم ايجاده بالدال يتم اتخاذ الاجراء ما بين القوسين ) 


في سطر ٠١‏ وما بين القوسين هي عمليه إخراج بواسطة echo‏ ثم نص عادي كتبناه وهو :Failed to connect to MySQL‏ ومعناه فشل في 
الاتصال ثم نقطة ومعنى النقطة هنا (ايضا يتم اخراج ما بعد النقطة وهي اختصار لعدم تكرار echo‏ ) ما بعد النقطة طلبنا اخراج الخطأ بواسطة الدالة 


. nysqli connect error() 


Sname- $ POST['name']; 
$mobile-$ POST['mobile']; 
Saddress-$ POST['address']:; 
$note-$ POST['note']:; 


كما تلاحظ من سطر ١5‏ الى سطر ١5‏ عملية استقبال للبيانات الى متغيرات عن طريقة POST Alla‏ $ .كما في السطر ١١‏ أنشأنا متغير وأسميناه 
$name‏ ثم عملية استيراد الحقل name‏ إلى داخله بواسطة $_POST‏ .وهكذا مع بقية المتغيرات. 

21 Ssql-"INSERT INTO student (name, mobile, address, note) 

"FEMME VALUES('$name','$mobile', '$address','$note' )"; 

في سطر 7١‏ الى ۲۲ عملية وضع الاستعلام داخل متغير وهو sq]‏ ويمكن تسميته باي اسم. قمنا بعمل متغير واسميناه $sql‏ ثم ادرجنا بداخلة عملية 
استعلام وتعلمنا مسبقا طريقة الاستعلام والادخال بواسطة SOL‏ في السطر ۲١‏ كتبنا تعليمة الادخال INSERT INTO‏ الى student‏ وهو الجدول 
وحددنا الاعمدة التي سنضيف اليها وهي (name, mobile address, note)‏ ثم في سطر ۲۲ حددنا القيم VALUES‏ وهي المتغيرات التي أدخلنا 
فيها البيانات الاسطر من ١5‏ الى Y‏ وحددنا المتغيرات .('$name','$mobile', '$address','$note")‏ 


"ELEME mysqli query(Scon,$sa1): 
FEMME echo الاضاقة يتجاح"‎ cac"; 


في سطر Yf‏ كما في الصورة أعلاه أضفنا Alla‏ جديدة وهي دالة الاتصال وتنفيذ الاستعلام عن طريق المتغيرات والصورة العامة هي ; 
mysqli, query($a, $b)‏ حيث تكتب الدالة كما هي ويضاف بدلا من $a‏ متغير الاتصال وقمنا بتغييره $con-‏ والمتغير Sb‏ هو متغير الاستعلام وقد 
وضعنا المتغير الذي يحوي الاستعلام وهو $sql‏ . في سطر YO‏ بعد الانتهاء والمرور من سطر Y£‏ وتنفيذ الاتصال والاستعلام الخاص بالبيانات 
وادخالها يتم كتابة (تمت الاضافة بنجاح). 


ملاحظة: في تنفيذ الاتصال مع قاعدة البيانات في لغة البي اتش بي يفضل عمل تعليمة الشرط jf‏ عند تنفيذ الاستعلام في حالة وجود خطأ يتم تحديده مالم 
ستظهر الرسالة "تمت الاضافة بنجاح" حتى لو كان هناك خطأ. لذلك وجد حل لهذه الملاحظة وهو كما في الكود التالي: 


if (!mysqli query (Scon,S$sq1)) 
1 
die('Error: '. mysqli error($con)): 
1 

:"تمت الاضاقة يتجاح" echo‏ 

mysqli close(Scon); 


2 
2 
2 
2 


ضر هن 6١‏ ل 0 ما 


N 
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Bay‏ في سطر Ye‏ اضفنا شرط ¡f‏ وبطريقة جديد Bay‏ وجود علامة التعجب ! قبل الدالة وتعني (عدم) او (لم تنفذ) وفي هذا السطر يتم تنفيذ تعليمة 
sqli‏ والاتصال $con‏ والشرط هنا هو في حالة ( لم تنفذ الدالة ) أي فشلت في عملها يتم الدخول لما بين القوسين وهو اخراج كلمة (ERROR)‏ 
ومعناه خطأ ثم نقطة (.) والتي تعني إخراج ايضا دالة mysqli_error($con)‏ وهي دالة إظهار الخطأ لعملية الاتصال او اي مشكلة في تنفيذ الاتصال 
والاستعلام ووضعنا المتغير $con‏ وهو متغير الاتصال كما ذكرنا داخل الدالة كما تلاحظ. في عدم وجود فشل في الاتصال او الاستعلام لا يتم التنفيذ لما 
داخل القوسين ويتم الانتقال للسطر الذي بعده. 


في السطر YA‏ عند نجاح العملية يتم طباعة واخراج رسالة "تمت الاضافة بنجاح". في سطر ۲۹ Alla‏ جديد ايضا وهي دالة اغلاق قاعدة البيانات 
وصورتها العامة ( mysqli_close(‏ وما داخل القوسين نضع متغير الاتصال. 


نقوم بتطبيق عملية الإدخال للبيانات وهي عن طريق الفورم كما في الصورة : 


أدخل بيانات الطالب 


Aue الطالب محمد‎ aml 
888111222| الجوال‎ 
العنوان |اليمن - سيأ‎ 


ملاحظات الا يوجد ملاحظات 


كما تلاحظ في الصورة تم عمل البيانات التجريبية وسنقوم بإدخالها بالضغط على زر (ارسال) أو (submit)‏ وستظهر رسالة كما في الصورة: 


PETE 33| j Fu 
تمت الأاضافة ينجاح‎ 
< 


a‏ الان بالذهب الى localhost‏ ثم phpmyadmin‏ ثم قاعدة البيانات ثم 1 school‏ ثم الجدول student‏ وسنلاحظ التالي كما في الصورة: 


+ خيارات 


= جه | + note address mobile name number‏ 
م تسیل 6 سخ © حتف |1 يوسف صالح علي 9 |اليمن - صتعاء - أمانة العاصمة أدورة المواقع الالكتروتية 
م تعديل nci‏ © حتف 2 U...U.0800,OsO* £OSU.USU. Ut - 6266 888111222 10..OU.. 0  O'O € OSU.U.U‏ 0-6 *ناذنا Ù.Ø§‏ 


nig © تحديد الكل مع — م تغير‎ 8 M y 


تم اضافة السجل او البيانات التي ادخلتها ولكن تم ظهورها بالشكل الغير واضح وبرموز مختلفة ولا مشكلة في ذلك. حيث يمكننا عرضها على المتصفح 
باللغة العربية كما سيأتي. 
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إخراج البيانات بواسطة SELECT‏ 


تقوم عملية ال select‏ بعمل إخراج البيانات من القاعدة والجدول إلى صفحة php‏ أو صفحة الويب ويتم ذلك من خلال التعليمة sql‏ وصورتها العامة 
كالتالي : 


SELECT *FROM table name ; 


كما تلاحظ يمكن أن تكون التعليمة كما سبق تم إضافة نجمة قبل FROM‏ وتعني جميع الأعمدة في الجدول (table name)‏ وهناك أيضا ثورة آخرى 
لعملية اخراج البيانات كما في الصورة العامة التالية: 


SELECT coll, col2 FROM table name ; 


كما تلاحظ üke‏ عملية SELECT‏ للعمود الأول (coll)‏ والعمود الثاني (coI2)‏ من الجدول (table name)‏ سنقوم بتطبيق عملية إخراج البيانات 
من قاعدة البيانات التي قمنا بإنشائها school]‏ في الجدول student‏ . قبل تنفيذ الكود والصفحة نقوم بعملية تعبئة للبيانات إلى الجدول من خلال 
الصفحة التي أنشأناها مسبقا لعملية insert‏ ولتكن © طلاب جدد ثم نقوم بعملية إخراج البيانات لصفحة ويب. 


بعد القيام بعملية إدخال بيانات للجدول ضمن قاعدة البيانات لدينا سيكون شكلها في phpmyadmin‏ كالتالي: 


I‏ + كيارات 


note address mobile name number + |] > Y 
علي 9 اليمن - صتعاء - أماتة العاصمة دورة المواقع الالكتروتية‎ gla م دل :ودخ © حتف |1 يوسف‎ iv) | 

U.0s .لا... لا 6-6 *ناونا‎ 6566 OSOC* £OSU.USU...Üt- 626 © 888111222 10. OU. .O O'O © OSU.U.U 2| حتف‎ © agi م تسیل‎ 

م تیل :3 سخ @ حتف 3 Ù... Ù, ŞO, 02° gÙ a+ÙŠ0§ - ØÙ.Ø| 777888000 +65610...6 OQ*U‏ 0-6 *ناؤن 05نا 

U,os ÜŠÙ 6-6 لالا65 *©05©, ©6586 .لا... لا‎ ...696+6 5 ÙÙŠØpÙ. OuOSU.O 4| غ3 سخ © حتف‎ de 

Ù.Ø§ *ناؤنا‎ 6-6 U...0,0800 OsO* Ù 56لا‎ 0565 - 0-0x080 U,0°| 444333222 ÙŠØÙŠŮ%. Ø'Ù,ÙŠ 5| م تسیل 4 سخ © حتف‎ 

Ü.0s ÙŠÙ 6-6 *6560,656,لا... ا‎ 1080.09-080* - Ù...Ù fÙ 999000999 صزنا‎ USU. OyOSU.O 6 حتف‎ © agi dq? 


كما تشاهد أعلاه ظهور رموز للبيانات التي قمنا بإدخالها. نقوم بحذف اول سطر وهو الاوضح بين الجميع ونبقي على بقية الصفوف التي ادخلناها. 
سنقوم بعمل صفحة بي اتش بي ونسميها select.php‏ في المجلد الذي فيه الصفحات insert.php‏ وغيرها ونجعلها تقوم بعملية إخراج البيانات من 
قاعدة البيانات إلى الصفحة وسيكون الكود كالتالي: 


<body> 
<?php 
$con=mysqli_connect ("localhost","root","","schooli"); 


// Check connection 

if (mysqli connect errno()) 
1 
echo "Failed to connect to MySQL: " . mysqli connect error():; 
) 


$result = mysqli query(S$con,"SELECT * FROM student"); 


while ($row = mysqli fetch array ($result) ) 
0 
echo Srow['name']." ".Srow['mobile']; 
echo "«br»"; 
) 


mysqli close ($con); 
2> 


1 
3 
4 
5 
6 
7 </body> 


2 
5 
2 
2 
2 
27 
2 
5 
2 
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كما تلاحظ الكود في صفحة select.php‏ في سطر 3 عملية اتصال بقاعدة البيانات في السرفر localhost‏ ثم كلمتي المرور (اسم المستخدم root‏ و 
كلمة السر فارغة ) ثم اسم قاعدة البيانات school]‏ وادرجنا ضمن المتغير .$con‏ 


في سطر Y Y‏ إلى ٠١‏ عملية فحص للاتصال بقاعدة البيانات في حالة وجود خطأ ما يتم إظهاره ومكانه . في سطر ١١‏ عرفنا متغير واسميناه $result‏ 
ثم أدرجنا بداخلة دالة الاستعلام mysgli query()‏ وبداخلها عملية الاتصال بواسطة المتغير $con‏ (راجع سطر 4( وأيضا تعليمة sql‏ وهي 
(SELECT * FROM student)‏ والتي تعني استدعاء جميع الأعمدة في الجدول .student‏ 


في السطر Uå ١5‏ بعمل شرط while‏ بداخله عرفنا متغير $row‏ ويحوي بدخلة دالة mysgli fetch, array()‏ التي تقوم بعملية تنفيذ الاستعلام 
والاحتفاظ بالبيانات التي استعلمت عنها داخل مصفوفة (array)‏ و $result‏ هو المتغير الذي يحوي الاستعلام ويتم التنفيذ بوجوده. في سطر Y Y‏ 
عملية إخراج لبيانات العمود الذي نريده كتبنا المتغير $row‏ الذي يحوي المصفوفة والأعمدة كاملة ثم بين قوسين اخترنا العمود [name]‏ ثم نقطة ثم 
إخراج فراغ كفاصل " " ثم نقطة وعملية إخراج للعمود [mobie]‏ من المصفوفة في المتغير $row‏ . في سطر Y Y‏ النزول لسطر بعد كل اسم. 
والغرض من دالة الشرط while‏ هو المرور على جميع الصفوف في المصفوفة التي ستحوي جميع البيانات من الجدول student‏ . نقوم بالان بتنفيذ 
الكود في localhost‏ للصفحة select.php‏ وسيكون الناتج كما في الصورة : 


€ Œ | D localhost/app1/select.php 


محمد عبدالله 888111222 
احمد حسن 777888000 
قيصل صالح 222111345 
يحيى على 444333222 
نبیل صائح 999000999 


كما نلاحظ عملية الإخراج تم إظهار جميع الصفوف في قاعدة البيانات التي لدينا. وسيتم التطرق فيما بعد حول كيفية إخراج بيانات حسب شروط معينة. 
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تعديل وحذف البيانات بواسطة (UPDATE - DELETE)‏ 
من أهم عمليات المواقع هي التعديل على البيانات والتي نحتاجها لعملية التعديل على جزء معين أو كامل لبعض الصفوف او قاعدة البيانات. هنا سنتطرق 
لطريقة التعديل على صف معين بواسطة تعليمة SQL‏ وهي UPDATE‏ والصورة العامة للتعديل على أي صف كالتالي: 
UPDATE table name SET col1='yusuf', col22'7770001119'‏ 
WHERE id-'1';‏ 


كما نلاحظ في السطر الأول ذكرنا تعليمة التحديث أو التعديل UPDATE‏ ثم الجدول الذي سنعدل في أحد table name 435i‏ ثم üke‏ أمر SET‏ 
والذي يأمر بوضع البيانات بدلا عن السابق ثم حدد العمود الذي نريد التعديل فيه وهو العمود coll‏ وأدرجنا القيمة المعدلة فمثلا هما كتبنا الاسم يكون 
yusuf‏ ثم فاصلة وذكرنا عمود آخر وهو 012 لتعديل الجوال وكتبنا القيمة كما تلاحظ. في السطر الثاني وهي الأهم ولابد من وجودها وهي الشرط لأن 
السرفر لا يعرف اي صف يتم التعديل فيه فتأتي هنا قيمة الشرط وأهميته بحيث يحدد في أي سطر يتم التعديل حيث كتبنا الشرط WHERE‏ وتعني ) 
بشرط أن يكون ) ثم حدد الشرط وهو أن رقم الصف او السجل يساوي ١‏ . سيتم التعديل على السجل او الصف الذي يحمل الرقم ١‏ فقط ولا يتم التعديل 


في أي صف آخر. 
تطبيق عملية التعديل : 


سننشئ قاعدة بيانات جديدة ونسميها (school)‏ مطابقة لقاعدة البيانات السابقة والجدول student‏ ويحوي نفس الأعمدة فقط سنغير eu‏ العمود 
number‏ الى id‏ ويمكنك عملها بسهولة بنفس الطرق التي تعلمناها سابقا. 


سننشئ مجلد جديد داخل المجلد www‏ ونسمي المجلد الجديد والذي سنضع الصفحات فيه ب update‏ . 
سنحتاج إلى ٦‏ صفحات ;php‏ 

config.php 

insert.php 

insert process.php 

edit.php 


delete.php 


الأولى هي config.php‏ والتي تحوي بيانات الاتصال لقاعدة البيانات ونستخدمها لغرض استدعائها في الصفحات البقية بدلا من عمل كود الاتصال في 

كل صفحة. ولاستدعائها نستخدم دالة (include)‏ التي تستدعي الكود الذي بداخل الملف. الصفحة الثانية وهي insert.php‏ وصفحة أخرى تتبعها 
وهي (insert. process.php)‏ التي تحويان كود الادخال للبيانات. الصفحة الرابعة وهي edit.php‏ وهي الصفحة التي ستقوم بعملية التعديل على 
البيانات. صفحة delete.php‏ والتي تحوي كود الحذف. 


وسيكون شكل المجلد وما يحتوي من ملفات كما في الصورة : 
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Organize v Include in library v Share with v Burn New folder dz v | e 


2 


e Favorites .* Name Date modified Type Size 


BE Desktop "^ config YeME/.£/«R +\:£) PHP Script 1KB 

T$ Downloads 5 delete 715/١5/1١ ص‎ «3» PHP Script 118 

E] Recent Places edit 7١15/١8/1١ صن‎ tV PHP Script 3 KB 
® index Y-\E/-E/-0p «1:01 PHP Script 2 KB 
Î Libraries > insert YA Y/W م‎ ‘E:T PHP Script 2 KB 
E Documents ® insert process Y 
d Music 
fi] Pictures 
EE Videos 


\E/°T/T) م‎ «£0 PHP Script 1KB 


«Àj Homegroup 


Computer‏ اللاو 
Local Disk (C:)‏ & 
cx New Volume (D:)‏ 
New Volume (E:)‏ وت 


New Volume (F:)| |‏ وت 
E yousef's iPhone‏ 


Ga Mahun 


k 6 items 


قبل البدء في شرح عمل أكواد الصفحات اعلاه نقوم بإظهار صورة لقاعدة البيانات التي سنعمل عليها من phpmyadmin‏ وهي كما في الصورة : 


admin/index.php?db-school&table-student&target-tbl replace.php&token- 1b804bfe2e51e0b9bbeec73e016747ff£PMAURL-2tgv| #2 خا‎ Eg 7 & 
Ci localhost » @ school » f student 


E] Browse ¥# Structure £) SQL œ% Search Jë Insert [& Export Ej Import 4 Operations 35 Triggers 


$ Name Type Collation Attributes Null Default Extra Action 
Gg 1id int(4) No Aone AUTO INCREMENT 4? Change © Drop ® Primary [3j Unique لك‎ Index f Spatial [3r] Fulltext |] Distinct values 
O 2 name  varchar55) utf8 bin No None 2 Change © Drop 2 Primary [y Unique زع‎ Index fF Spatial [3] Fulltext | ] Distinct values 
LJ 3 mobile int(14) No None 4f Change © Drop ف‎ Primary (gj Unique $ Index RE Spatial [3] Fulltext [E Distinct values 
Lj 4 address varchar(66) utf8 bin No None 2 Change © Drop ف‎ Primary |j Unique كن‎ Index fF Spatial [3] Fulltext | ] Distinct values 
O 5 note varchar(100) utf8 bin No None 4f Change © Drop ف‎ Primary (gj Unique $) Index RE Spatial [zr] Fulltext [E] Distinct values 


t O Check All With selected: [3 Browse — 4? Change @ Drop هي‎ Primary [qj Unique $] Index 


Print view 4E Relation view f Propose table structure @ jp Move columns‏ ع 
Sé Add |! | column(s)® At End of Table © At Beginning of Table © After | id "| (Go‏ 


LL 


* Indexes 


— Information | 


Space Row statistics 

usage Format Compact 
Data 16 KD — Collation utf8 unicode ci 
Index ° 8 Next autoindex 22 
Total 16 KB Creation Apr 10, 2014 at 08:45 AM 


كما في الصورة نلاحظ الصورة وهيكل قاعدة البيانات والأعمدة الموجودة فيها. 
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config.php صفحة‎ 


«?php 


$conn = mysql connect ("localhost","root","") 
or die("cannot connected"); 


1 
4 
5 


زر 


(mysql select db("school",$conn); 


ب 


co 


?» 


كما تلاحظ أعلاه في صفحة config.php‏ في سطر ” عملية اتصال بالسرفر من خلال Alla‏ الاتصال ) mysql. connect(‏ « تم الاتصال بالسرفر 
localhost‏ ثم المستخدم root‏ ثم كلمة المرور داخل علامتي تنصيص وهي فارغة لأننا لم نعين كلمة مرور للسرفر المحلي الذي نعمل عليه ووضعنا 
هذه البيانات ضمن المتغير .$conn‏ 


في ٤ Ja‏ في حالة عدم الاتصال لأي سبب أو خطأ هذا امر بإعطائنا جملة الخطأ وهي can not connected‏ . في سطر 5 دالة الاتصال بقاعدة 
البيانات من خلال المتغير $conn‏ الموجود في السطر + ويحوي بيانات الوصول لقاعدة البيانات من السرفر. 


صفحة insert.php‏ وصفحة insert. process.php‏ هي نفس الصفحات التي تعلمناها في عملية الإدخال للبيانات لم نغير سوا اسم قاعدة البيانات 
من 5010011 إلى school‏ والأكواد كما في الصورة: 


: insert.php صفحة‎ 


5 «meta http-equiv-"Content-Type" content-"text/html; charset-utf-8"» 


«title»Insert Data«/title» 
«style type="text/css"> 


9 . 56110625 { 
10 margin:O0 auto; 
11 width: 400px; 
12 direction:rt1l; 
13 color:£C00; 
14 font-family:"Times New Roman", Times, serif; 
15 font-weight:bold; 
16 font-size:16px; 
17 border: solid £990 1px; 
18 border-radius:3px 3px 3px 3px; 
9 padding:4px 4px 4px 4px; 
«/style» 
</head> 
<html> 
<body> 


«center»«b»4 |LAj|! أدخل بياتات‎ </center> 
«div class-"student"» 


فم نم نِم نِم نِم نَم ديم نِم نِم Q NN‏ 
O‏ شر يم نين کر سن ى [ 


«br /» 
7 «form action-"insert process.php" method-"post"» 
8 الطالب‎ p! 
9 <input type="text" name="name"><br /> 
0 JI gil 
31 «input type-"number" name-"mobile"»«br /» 
32 العتوان‎ 
33 <input type="text" name="address"><br /> 
34 ملاحظات‎ 
35 «input type="text" name-"note" value-"3SLbh»-yu"»«br /» 
36 «input type-"submit"» 
37 </form> 
نك‎ </div> 
9و3‎ c /podv:l 
EME </html> 


insert_process.php صفحة‎ 
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<html xmins-"http://www.w3.o0rg/1999/xhtml"» 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-utf8" /> 
«title»Insert Process«/title» 

</head> 

<body> 

<?php 

$con= mysqli_connect ("localhost","root","","school"); 


n 4» C N 


6 


$name- $ POST['name']; 
$mobile-S$ POST['mobile']; 
S$address-$ POST['address']; 
$note-$ POST['note']; 


S$sql-"INSERT INTO student (name, mobile, address, note) 
VALUES ('S$name','S$mobile','Saddress','S$note' )"; 


if (!mysqli query (Scon,Ssq1)) 
1 
die('Error: " . mysqli error(Scon)):; 
) 

echo الاضاقة يتجاح"‎ cac"; 

mysqli close(Scon); 

?» 

</body> 

</html> 


وتظهر الصفحة insert.php‏ كما في الصورة : 


[3 localhost/update/insert.php x d; 9 


أدخل بيانات الطالب 


بعد تعبئة الحقول وكما تعلمنا سابقا يتم استدعاء الصفحة insert, process.php‏ لتقوم بعملية ادخال البيانات للجدول. 
صفحة index.php‏ : 


وتحوي هذه الصفحة عملية استعلام بإخراج جميع البيانات الموجودة في الجدول student‏ مشابهة للصفحة التي تعلمناها سابقا (select.php)‏ 
وسنقوم بعمل جدول لعرض هذه البيانات وامام كل صف يوجد رابط باسم تعديل وايضا رابط حذف. وسيكون الكود في الصفحة كما في الصورة التالية: 


الجزء الأول من الكود : 
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«?php 
//including the database connection file 
include ("config.php"); 


gn 4 C) No فم‎ 


//fetching data in descending order (lastest entry first) 
Sresult-mysql query ("SELECT * FROM student ORDER BY id DESC"); 
?» 


5 ل € 


<html> 

«title»i.a2.5,J!«/title» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 

<body> 

«div style-"direction:rtl;"» 

<a href-"insert.php"»4 54» i 3La| </a><br/><br/> 

«?php 


echo "<table width-'50$' border-0 align=center>"; 


echo "<tr bgcolor-'£CCCCCC'»"; 
echo "<td> الاسم‎ > / 20<" : 

echo "«td»J! خ "607 />الجو‎ 

echo :"<20:/>العتوان<2<0>"‎ 

echo />بلاحظات<20>"‎ 20<" 

echo /»>تعديل<50>”"‎ 20<" : 

echo "«/tr»"; 


o‏ شر يم 


e w‏ ا 


2 
5 
rA 
5 
2 
2 
2 
2 
2 
2 
2 


C كلك‎ e 


كما نلاحظ في الصورة والكود أعلاه في سطر ١‏ بدأنا الكود الخاص php-lu‏ » في السطر Y‏ عبارة عن تعليق والذي يكون دائما باللون الأصفر ضمن 
أكواد البي اتش بي والمسبوقة بعلامتي سلاش // والتعليق لمن يقرأ باللغة الانجليزية ويشرح التعليق وضيفة السطر الذي يليه أو حسب ما يريد 
المعلق أو من يكتب التعليق. 


في سطر Alla Y‏ التضمين include‏ والتي اضفنا بداخلها اسم الملف الذي يوجد فيه عملية الاتصال وبياناتها. في سطر o‏ شرح لما في سطر * والذي 
يحوي نص الاستعلام بواسطة دالة الاستعلام mysql, query‏ وبداخلها طلبنا عملية اخراج جميع البيانات من الجدول «student‏ ثم اضفنا خاصية 
جديدة وهي ORDER BY‏ والتي تعمي (رتب بواسطة) ثم حددنا ال10 ويعني الرقم ثم حددنا ماهية الترتيب وهي DESC‏ وتعني تنازلي أي آخر 
بيانات طالب تم ادخالها تظهر في البداية. وعكسها التصاعدي وهي È ASC‏ سطر ۷ أغلقنا كود البي اتش بي. 


من السطر ٩‏ الى السطر ٠١‏ أكواد تعلمناها مسبقا يمكنك المرور عليها ومعرفة وظيفة كل كود أو سطر. في سطر ١7‏ فتحنا كود بي اتش بي في سطر 
9 فتحنا جدول بواسطة كود PHP‏ وكما تلاحظ وضعنا خاصية العرض ٠‏ 705 ثم البوردير او الحواف وحددناها ب٠‏ صفر ثم خاصية التوسيط ووضعنا 
قيمة center‏ وتعني وسط. وسيظهر الجدول في وسط الصفحة. علما اننا نحتاج الجدول للترتيب والتنظيم. 


في سطر Y Y‏ فتحنا صف وهو الاول وهذا الصف سيكون عبارة عن راس الجدول والذي سنضع فيه عبارات (الاسم — الجوال - العنوان .. الخ). لاحظ 
اننا فتحنا الصف الاول في Y‏ ولاحظ انه انتهى في سطر YV‏ من سطر ۲۲ الى lae ١١‏ خلايا بالترتيب الخلية الاولى في سطر Y Y‏ تحمل الاسم 
والخلية الثانية في سطر ۲۳ تحمل الجوال وهكذا الى سطر 5 ؟. 


الجزء الثاني من الكود لصفحة index.php‏ : 
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ما 


while(Sres-mysql fetch array ($result) ) { 


echo "<tr>"; 

echo "«td»".Sres['name']."«/td»"; 

echo "«td»".Sres['mobile']."«/td»"; 

echo "«td»".Sres['address']."«/td»"; 

echo "«td»".Sres['note']."«/td»"; 

echo "<td><a href-'edit.php?id-$res[id]'»).54»-«/a» | «a href-'delete.php?id-S$res[id]'»3i»«/a»«/td»"; 


w w w CO N 


[7] 


0 
1 
2 
3 
0 
5 
6 
7 


W Ww w 


) 

echo "«/table»"; 
?» 

«/div» 

</body> 

</html> 


كما نلاحظ من سطر ۲۹ إلى ٠١‏ نريد أن نقوم بعمل إخراج البيانات من جدول الطالب في قاعدة البيانات وبما أننا قد قمنا بعمل الاستعلام في الجزء الأول 
من الكود سنقوم هنا باستدعاء البيانات حسب الاستعلام ونقوم بإخراجها كاملة بواسطة الشرط while‏ . فكما نلاحظ في السطر ۲۹ داخل الشرط while‏ 
قمنا بعمل دالة الجلب للبيانات mysql fetch. array()‏ للمتغير الذي فيه الاستعلام وهو $result‏ وادرجنا هذه البيانات ضمن المتغير الذي سيقوم 
بعملية العد او المرور على كل صف في الشرط ويقوم بإخراج البيانات وهو $res‏ . 


في سطر ”١‏ فتحنا صف جديد »في سطر ۳"۲ فتحنا أول خلية وهي للاسم ثم استدعينا المتغير $res‏ أن يخرج لنا ما في الحقل في قاعدة البيانات الذي 
اسمه name‏ ثم أغلقنا الخلية. في سطر YY‏ نفس الخطوة السابقة ويتم استدعاء بيانات الجوال الموجودة في المكان او الحقل mobile‏ في قاعدة 
البيانات ثم نغلق الخلية. وهكذا في سطر 4" وه" . 


في سطر Y‏ تذكر اننا مازلنا في نفس الصف أي أننا نمر على الصف في قاعدة البيانات نخرج الاسم ثم الجوال ثم العنوان ثم الملاحظات ثم نفتح خلية 
ايضا زيادة لنضع فيها رابط مكتوب فيه تعديل ورابط اخر رابط للتعديل. 


قبل شرح السطر Y‏ تعلمنا كيفية استدعاء البيانات كاملة من قاعدة البيانات هنا نريد ان نتعلم كيف نقوم بالتعديل على صف معين ولأننا نريد ان نعدل 
على صف معين فلابد من معيار معين يساعدنا في التعديل على الصف الذي نريده وقد ذكرنا مسبقا ان في قواعد البيانات وفي الجداول بالتحديد يوجد 
المفتاح الاساسي فيها او ما يسمى (Primary Key)‏ أو رقم كل صف في الجدل له رقم محدد لا يتكرر ابدا. من هنا نستطيع ان نعدل او نحذف اي 
صف بواسطة هذا الرقم او المفتاح حتى لا يتم حذف او تتعدل صفوف أخرى. 


في السطر”" من بدايته الى نهايتة يكون بين علامتي تنصيص ثنائية " " لا تتكرر بداخله ونضع علامتي التنصيص المفردة ويمكن تكرارها على ان 
تكون بالشكل الصحيح. من بداية السطر إلى علامة الفصل | المستقيمة سنقوم بعمل رابط للتعديل بدأنا بعمل خلية ثم رابط يوصلنا للصفحة edit.php‏ 
وهي الصفحة الخاصة بالتعديل وأن تكون بين علامتي تنصيص (LU.‏ للأهم لاحظ بعد اسم الصفحة مباشرة (edit.php?id-$res[id])‏ قمنا بعمل 
علامة استفهام بعد اسم الصفحة والتي تشير إلى ارسال شيئ ما مع الرابط ثم عملنا متغير وهو $id‏ وأدرجنا بداخلة رقم الصف من خلال المتغير الذي 
يقوم بعملية إخراج البيانات بواسطة Sres[id]‏ .ويصبح المتغير هنا خازن لقيمة رقم الصف في حالة تم الضغط على رابط تعديل يقوم الرابط باخذ رقم 
الصف إلى صفحة التعديل وتقوم صفحة التعديل بأخذ الرقم للصف وتستدعيه لتعديله مباشرة. بعد ذلك اغلقنا علامة الرابط الاولى بعد علامة التنصيص 
ثم كلمة (تعديل) ثم أغلقنا كود الرابط. 


في نفس السطر وبعد علامة الفصل | ايضا نفس الفكرة تماما عمل رابط لصفحة الحذف واسناد رقم الصف للمتغير $id‏ لإرساله لعملية الحذف في 
صفحة الحذف .delete.php‏ 


Bay‏ من سطر "١‏ إلى YS‏ تتكرر العملية مع كل صف في الجدول بواسطة الشرط إلى ان يتم الوصول إلى آخر سجل او صف في الجدول وكل صف 
يخرج في صف مستقل مع كلمة تعديل وحذف. قبل مشاهدة الصفحة او فتح المجلد نقوم الان بتعبئة بيانات للجدول من خلال صفحة index.php‏ كما 
في الصورة نضغط على الرابط (إضافة جديد): 
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NEN 
[3 localhost/update/index.php CFE © 7 GE = 


الاسم الجوال العنوان ملاحظات تعديل 


بعد الضغط على اضافة جديد ستظهر الصفحة insert.php‏ والتي تطلب بيانات نقوم بعمل بيانات عادية لثلاثة صفوف وسيكون شكل الصفحة الرئيسية 


index.php‏ كالتالي: 
E 3=‏ 2 © « # ده update/index.php‏ 
اضافة جديد 
الاسم الجوال العنوان ملاحظات تعديل 
حسن أحمد 987654321 سوريا - حلب لا يوجد ملاحظات تعديل | dia‏ 
عامر عبدالجليل 123456789 اليمن - عدن لا يوجد ملاحظات تعديل | حذف 
يوسف صالح 1122334455 اليمن دورة المواقع الالكترونية تعديل | ciis‏ 


قمنا بعمل بيانات تجريبية كما في الصورة السابقة. 
صفحة edit.php‏ : 


طريقة عمل صفحة edit.php‏ : في هذه الصفحة بعد الضغط على الرابط تعديل امام اي صف نريد تعديله كما في الصورة اعلاه تقوم الصفحة 
index.php‏ وكما وضحنا سابقا بارسال رقم الصف المراد تعديله وفي الصفحة edit.php‏ نقوم بعملية استعلام من هو صاحب هذا الرقم من الجدول 
في قاعدة ابيانات ونخرجه إلى فورم كما في الصورة نقوم بالضغط على (تعديل) امام (حسن أحمد ) سيظهر في صفحة edit.php‏ كما في الصورة: 


© | D localhost/update/edit.php?id- 10 E 
mT 
اسن گند‎ ^ nudi 


الجوال 987654321 
الحنوان |سوريا - حلب 


لا يوجد ملاحظات 


تحديث 


كما في الصورة اعلاه تم استدعاء الصف المراد تعديله بواسطة استعلام من خلال ال11 التابع له. Bay‏ الان الخطوة التالية هناك رقم ال10 ciall‏ 
موجود في الرابط اعلاه وهو ٠١‏ ومشار له بالسهم» هنا نحتاج له في عملية التحديث. نقوم الان بعملية التعديل على البيانات مثلا نغير الجوال. بعد اتمام 
التعديل ونقوم بالضغط على زر (تحديث) وتقوم الصفحة بأخذ الرقم 10 لهذا الصف والذهاب لقاعدة البيانات وتعديل البيانات المعدلة للصف صاحب الرقم 
id‏ من خلال طريقة ال post‏ التي تعلمناها مسبقا. بعد التعديل يتم توجيهنا الى الصفحة الرئيسية بواسطة كود معين سنشرحه فيما يلي. 


وسيكون الكود الموجود في صفحة edit.php‏ كالتالي: 
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«?php 
include once ("config.php"); 


if(isset(S POST['update'])) 
1 


IN) ES‏ یں ضط ی 6١‏ ل 


Sid = $_POST['id']; 

$name-$ POST['name']; 
$mobile-$ POST['mobile']:; 
Saddress-S$ POST['address']: 
$note-$ POST['note']:; 


C‏ ما 


//updating the table 
Sresult-mysql query("UPDATE student SET name-'$name',mobile-'S$mobile',address-'S$address' ,note-'$note' 
WHERE id-$id"); 


//redirectig to the display page. In our case, it is index.php 
header("Location: index.php"); 

) 

?» 

«?php 

//getting id from url 

$id = $ GET['id']; 


//selecting data associated with this particular id 
$result-mysql query ("select * from student where id-$id"); 


while(Sres-mysql fetch array(Sresult)) 
t 

$name = Sres['name']; 

S$mobile = Sres['mobile']; 

Saddress = Sres['address']; 

$note = Sres['note']:; 


في الكود أعلاه سنقسمه الى نصفين من سطر ه إلى سطر ١5‏ لن يتنفذ من الكود أي شيء مالم يتحقق الشرط في سطر 4. وهو في حالة ملئ الحقول 
بالبيانات المراد تعدليها بواسطة POST‏ يتم التعديل في قاعدة البيانات. أي في بداية تحميل الصفحة وقبل ان نعدل يمر السرفر من هذه الاوامر ولا 
ينفذها الا بعد الضغط على زر (تحديث) لذلك يذهب للتنفيذ من سطر 77. 


الجزء الثاني من الكود: 


<html> 

<title>Edit Data</title> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 

<body> 

<div style-"direction:rtl; width:400px; margin:0 auto;"> 

«a href-"index.php"»i.a4. 5,3! </a> 

Xbr/»«br/» 


ou» C C) €) CO‏ كير 
N O 0 C "| a‏ 


في السطر أعلاه كود عادي 5" الى ££ lae‏ عنوان في سطر ۳۷ ثم كود اللغة (ترميز اللغة العربية) وهو مهم في سطر ۳۹ في سطر £Y‏ عملنا ديف 
وبداخله خصائص الاتجاه من اليمين الى اليسار ثم العرض حددنا 1٠٠‏ بكسل ثم المسافات لليمين واليسار وجعلنا الديف متوسط في الصفحة. ثم رابط 
واسميناه الرئيسية ليتم التوجه للرئيسية في حالة التراجع عن التعديل. ثم كود للنزول سطرين في سطر ؛ 4. 


في سطر £o‏ إلى Vo‏ أنشأنا فورم الذي يقوم بعملية استيراد البيانات المراد تعديلها والكود كما في الصورة: 
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«form name-"formi" method="post" action-""» 
«table border-"0"» 
«tr» 
«td» الاسم‎ </td> 
«td» 
«input type="text" name="name" value-'«?php echo Sname;?»'-» «/td» 
«/tr» 
«tr» 
«td»JI aJI </td> 
<td> 
<input type="text" name-"mobile" value-'«?php echo $mobile;?>'> </td> 
«/tr» 
«tr» 
العتوان<0<>‎ </td> 
<td> 
<input type="text" name-"address" value-'«?php echo $address;?>'> </td> 
</tr> 
<tr> 
/>ملاحظات<50>‎ 50< 


«td»«textarea name-"note" cols-"20" rows-"7"»«?php echo note; ?»«/textarea» </td> 
«/tr» 
«tr» 


<td><input type="hidden" name="id" value-'«?php echo $ GET['id'];?»'» «/td» 
<td><input type="submit" name-"update" value-"4A ua:"»«/td» 
«/tr» 
</table> 
</form> 
</div> 
</body> 


نأتي للشرح: 


كما ذكرنا سابقا من سطر o‏ إلى سطر ١5‏ لن Miu‏ من الكود أي شيء مالم يتحقق الشرط في سطر 4. في سطر t‏ شرط في حالة تم تنفيذ POST‏ 
الخاص بالقيمة update‏ والموجودة في الفورم form]‏ من سطر 5 ؛ الى 77. سيتم الدخول في محتوى الشرط. في سطر V‏ إلى سطر ١١‏ يتم عمل 
۴1 للبيانات من الفورم الى داخل المتغيرات. تقوم هذه المتغيرات باستلام البيانات بعد تعديلها والضغط على زر تحديث. 


في سطر ٠١‏ إلى ١5‏ يتم تنفيذ التعديل على الاعمدة واستبدال البيانات القديمة بالجديدة الموجود في المتغيرات والمستقبلة من الفورم بعد التحديث 
بواسطة الرقم id‏ الذي تم الحصول عليه من الفورم. في سطر ١8‏ استخدمنا Alla‏ جديد وهي header‏ والتي تقوم بعملية التوجيه عن وصول السرفر 
اليها يتم تنفيذ الأمر الخاص بها والتي تقوم بعملية اعادة التوجيه الى الصفحة index.php‏ 


في سطر ۲۳ إلى سطر Yo‏ نعود إلى ما قبل عملية التحديث : في سطر YY‏ نقوم بعملية اخذ رقم id‏ بواسطة GET‏ من الرابط المشار له سابقا ونضع 
الرقم 10 في المتغير $id‏ ثم في سطر Y‏ نقوم بعملية استعلام عاديه حول الصف المراد تعديله حيث نستورد الصف بشرط الرقم jd‏ كما نلاحظ في سطر 
5 بواسطة الشرط (where id-$id)‏ 


من سطر YA‏ الى 4" نقوم بعملية جلب للبيانات الخاصة بالصف الذي سنعدله ونقوم بوضع كل قيمة في المتغير المناسب كما نلاحظ ذلك في الاسطر 
۰ الى SY‏ 


من سطر ٠١‏ الى سطر VY.‏ قمنا بعمل الفورم الذي سيستقبل بيانات الصف الذي سنعدله وفي نفس الوقت الذي سنعدل فيه ما نريد ثم يقوم بإرسال 
البيانات لنفس الضفحة أو الشرط الذي تكلمنا عن انه لن يتنقة الا يان من الفورم. فى Uni ٤١ lau‏ فورم .واسميناة form‏ ثم تم à, Jl cu‏ 
POST‏ ثم الاكشن (action)‏ وهو الاهم فقد تعلمنا سابقا ان نقوم بعمل اسم الصفحة التي سيقوم الفورم بإرسال البيانات اليه بواسطة POST‏ ولكن 
لأن التعديل والارسال سيكون في نفس الصفحة سنضع علامتي تنصيص فقط أي انه لا يوجد صفحة يتم عمل action‏ خارج الصفحة edit.php‏ لذا 
نتركها فارغة أو نضع اسم edit.php‏ . في سطر 45 فتحنا جدول ثم صف في EV‏ ثم خلية في £A‏ وكتبنا فيها الاسم ثم خليه بجانب الخلية ووضعنا 
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فيها حقل من نوع text‏ وقد تعلمنا سابقا كيفية عملها وخصائصها والاضافة الجديدة هنا هي value‏ والتي سنضع فيها بيانات الصف الذي سنعدله. 
لذلك كما نلاحظ الخاصة value‏ في السطر ٠١‏ والخاصة بالاسم بين علامتي تنصيص نقوم بعمل استدعاء البيانات او الاسم الذي جلبناه في سطر Pe‏ 
من قاعدة البيانات. وهكذا مع بقية الحقول في الاسطر الاخرى. Bay‏ في سطر ٠۹‏ لم نقوم بإخراج الرقم 11 AN‏ يعتبر سري لا يظهر للأخرين فقد 
عملنا جلب له ولاكن ليس من قاعدة البيانات بل من الرابط بواسطة GET‏ واسندناه في المتغير $14 والذي سنحتاج له في عملية التحديث في السطر ٠‏ 
والسطر NE‏ 


صفحة delete.php‏ 
بعد الضغط على رابط حذف في صفحة index.php‏ أمام اي اسم من الاسماء يتم التوجة للصفحة delete.php‏ وكون الكود الخاص بها كالتالي: 


«?php 
//including the database connection file 
include ("config.php"); 


//getting id of the data from url 
$id = $ GET['id']; 


//deleting the row from table 
Sresult-mysql query ("DELETE FROM student where id-$id"); 


1 
2 
3 
4 
5 
6 
8 
9 


//redirecting to the display page (index.php) 
header ("Location:index.php"); 
?» 


فم كم هم فم 
هت فر نم 


I 


كما هو في الشرح باللون الاصفر. في سطر ” عملية الاتصال بقاعدة البيانات بواسطة دالة include‏ والملف المستدعى هو config.php‏ »في سطر 
٠‏ عملية الحصول على الرقم id‏ من الرابط الذي تم الضغط عليه(حذف) وضعه في المتغير $id‏ ثم في سطر 1 عملية الحذف وهنا استعلام بعملية 
الحذف للصف الذي رقمه داخل ال10. 


في سطر ١١‏ عملية توجيه للصفحة الرئيسية مباشرة بعد الحذف index.php‏ حتى أنك عند الحذف لا ترى الصفحة delete‏ فقد ترى ان العنصر او 
الصف الذي حذفته قد تم حذفه وتم اعادتك الى الصفحة الرئيسية. 
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11 
التعامل مع الصور 


إضافة الصور 
تعتبر إضافة الصورة بواسطة php‏ مع MySql!‏ من أهم وأساسيات المواقع الالكترونية والتعامل معها سيكون بسيط إن شاء الله وسنقوم بتطبيق 
مثال بسيط حول كيفية رفع صورة إلى قاعدة البيانات وعرض الصورة على صفحة الويب واستدعائها من قاعدة البيانات. 
الجديد في تطبيق رفع الصور هو أننا سنستخدم الدالة الخاصة برفع الملفات وهي : 
ifímove uploaded file($ FILES[......]|' tmp name!|, $........))‏ 


الدالة move, uploaded  file()‏ تقوم بالتأكد من صحة الملف والمحدد في ($_FILES)‏ باستدعائها لتقوم بكتابة او نسخ الصورة إلى السرفر الذي 
فيه ce gall‏ وأم المتغير الأخير ( .........) يشير إلى اسم المتغير ويحوي مكان وضع الملف في مجلد خاص داخل مجلد الموقع. 


إضافة للخاصية الجديد التي سنستخدمها في الفورم وهي : 
<input type-"file" name-"......... iE‏ 
تطبيق المثال: 


سنفرض أننا نريد أن نقوم بعمل قاعدة بيانات وبداخلها جدول ويحوي الجدول الذي يحوي رقم الموظف واسمه وصورته. سنقوم بعمل قاعدة بيانات 
وسنسميها pic‏ وبداخلها جدول أيضا وسنسميه pic‏ ايضاء وسنقوم بعمل مجلد images‏ داخل المجلد العام www‏ وسيكون لدينا ‏ صفحات 
(index.php — add.php - view.php )‏ وعمل كل صفحة كالتالي: 


index.php‏ : وهذه الصفحة ستكون الرئيسية ونقوم بإضافة الاسم والصورة من خلالها. 
:add.php‏ وهي الصفحة الخاصة بعملية الرفع وإضافة البيانات على قاعدة البيانات. 
iaia view‏ عرض البيانات مع الصور. 


مجلد images‏ ايضا داخل المجلد images‏ الاصل لكي نرفع الصور إليه. وسيكون شكل الملفات كما في الصورة : 


"m Computer » LocalDisk(C:) ١ wamp » www » images » 


Organize > Include in library > Share with v Burn New folder 
Xf Favorites Name 2 Date modified Type Size 
RE Desktop لل‎ images 1:0۷ File folder 
T$ Downloads ">! add PHP Script 2 KB 
35] Recent Places "I index PHP Script 1KB 
"t view PHP Script 1 KB 


قاعدة البيانات سيكون اسمها pic‏ بالإضافة إلى الجدول pic‏ وستكون كما في الصورة : 
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pic BB « pic © « localhost Eî] 


Triggers 3 | عمليات‎ f | syaa E) | تصدير‎ (jo Jas 8 | إيحث‎ 3 | SQL [ | يناء‎ Bé | استعراض‎ [5] 


i e إقتراضي‎ qi» الخواص‎ Collation الاسم توع‎ d 
Distinct values [& 245 oa [gj Spatial 72 فرید ]چ فبرست‎ [4b ستّط هي أساسي‎ © o 47 AUTO INCREMENT «-:Y Y in(11) id 1 5 
Distinct values [7 245 523 [7] Spatial pE قهرست‎ E [g I @ os م‎ qY لا‎ utf8 general ci varchar(222) name 2 | 
Distinct values [E] 245 oa [gj Spatial F£ — e E [y م تیر @ سط هي أساسي‎ «Y لا‎ utf8 general ci varchar(222) photo 3 | 


cos Bj فيد‎ Bb £9 IQ o cu ڪڇ‎ cB. 1 


كما في الصورة لدينا الأعمدة 10 ويعني الرقم لكل موظف وهو اتوماتيكي وهو المفتاح الرئيسي أيضا « العمود name‏ للأسماء . العمود 060 وهو 
مسار أو مكان الصورة على مجلد الموقع. 


: index.php صفحة‎ 


سنقوم بعمل الكود الخاص بعملية اضافة البيانات من خلال الفورم الذي تعلمناه مسبقا بالإضافة الى الخاصية الجديد وهي خاصية المدخلات من نوع 
الملفات وسيكون الكود كما في الصورة: 


«body» 

«div style-"direction:rtl;" » 

<center> 

«form enctype-"multipart/form-data" action-"add.php" method="POST"> 
إسم الموظق‎ <input type="text" name-"name"»«br» 
الصورة‎ <input type-"file" name-"photo"»«br- 
«input type="submit" value-"4iiàLaI"» 

</form> 

«br f> 

«br /» 

«a href-"view.php"»3L35Li. PH gs«/a» 

</center> 

</div> 
</body> 


كما نلاحظ الصورة أعلاه صفحة html‏ عادية داخل body-l‏ في سطر ۸ عملنا ديف خاص بالفورم ليكون الفورم في وسط الصفحة بالإضافة إلى أن 
يكون المحتوى ذو اتجاه يدعم اللغة العربية أي من اليمين إلى اليسار. من سطر ٠١‏ الى سطر ٠١‏ عملنا فورم خاص بالبيانات التي سنرسلها إلى 
الصفحة add.php‏ »في سطر ٠١‏ قمنا بفتح الفورم ثم بدأنا بعمل الخواص للفورم بشكل عام أضفنا خاصية جديد للفورم وهي enctype‏ ووظيفتها 
تحديد نوع البيانات المرسلة للسرفر من الفورم عبر (POST)‏ وأعطيناها القيمة multipart/form-data‏ وهي تستخدم حين يكون لدينا ملف لرفعه 
على السرفر. ثم قمنا بتعيين action-!‏ وحددنا الصفحة add. php‏ ثم الطريقة method-‏ وحددنا POST‏ . 


في سطر ١١‏ حقل اضافة الاسم e‏ في سطر ٠١‏ أضفنا الخاصية الجديدة للمدخلات وهي مدخلات من نوع ملف c typez" file"‏ في سطر ١١‏ اضفنا زر 
submit-‏ ثم أغلقنا الفورم في سطر E‏ وسيكوم شكل الصفحة كما في الصورة: 
localhost/images/ qv‏ 3[ 


| إسم الموظف‎ 
No file chosen | Choose File | الصبووة‎ 


اضافة 
t‏ 


عرض البيانات 
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add.php صفحة‎ 


وهذه الصفحة الأهم وهي التي ستقوم بعملية الإضافة والاتصال بقاعدة البيانات ورفع الصورة إلى السرفر. وسيكون الكود كما في الصورة: 


<body> 

<?php 

$target = "images/"; 

$target = $target . basename( $ FILES['photo']['name']):; 


//This gets all the other information from the form 
Sname-$ POST['name']; 
Spic-($ FILES['photo'] ['name']):; 


8 
9 
0 
1 
2 


// Connects to your Database 
mysql connect("localhost", "root", "") or die(mysqdl error()) ; 
mysql select db("pic") or die(mysql error()) ; 


//Writes the information to the database 
mysql_query ("INSERT INTO pic (name, photo) VALUES ('$name', '$pic')") ; 


//Writes the photo to the server 

if(move uploaded file(S FILES['photo']['tmp name'], Starget)) 
1 

//Tells you if its all ok 

;",, تمت الاضاقة يتجاح" echo‏ 

echo "<a href-'index.php'»4.4.5,1J />عودة‎ 2<": 
) 

else ( 

//Gives error if its not 

:"لم يتم رقع Jlis.. iladi‏ مشكلة" echo‏ 

) 

?» 
</body> 


CD ل‎ M C شر‎ CQ IN 


Q Q Q يم يم دم‎ NN N 
O iD ) 


كما في الصورة أعلاه في سطر ١‏ بدأنا كود البي اتش بي في سطر q‏ عملنا متغير واسميناه $target‏ ووضعنا بداخله مسار وضع الصورة وهو 
images/‏ وتعني بداخل المجلد images‏ . 


في سطر ٠١‏ قمنا بإضافة المسار الأول مع اسم قاعدة البيانات حسب الكود التالي : 
$target = $target . basename( $ FILES['photo']['name'];‏ 


المتغير $target‏ الأول اسندنا له مكان المجلد من خلال المتغير السابق الذي قبله بالإضافة إلى basename() Alla‏ والتي تحدد نوع الملف وحددنا 
0 وهي اشارة إلى نوع الملف الذي سنرفع وهو من نوع صورة والاسم هو نفس الاسم للصورة أي يضع الصورة وبرفعها كماهي بنفس الاسم. 


في سطر ١١‏ عملية استقبال البيانات من الفورة استقبلنا الاسم في المتغير $name‏ ثم في سطر ؛ ١‏ استقبلنا الملف من نوع صورة إلى المتغير $pic‏ » 
في سطر V‏ 1 و8١‏ عملية اتصال بالسرفر وقاعدة البيانات. 


في سطر Adae ۲٠١‏ إنشاء استعلام Jay‏ البيانات إلى قاعدة البيانات من خلال المتغيرات التي استقبلت البيانات من الفورم. في سطر ۲٤١‏ قمنا بعمل 
شرط لعملية الرفع من خلا الدالة التي ذكرناها سابقا الجزء الأول من مدخلات الدالة $_FILES['photo'"]['tmp_name']‏ اشارة للملف او الصورة 
التي سنرفعها وعملية الرفع باسم موقت الى ان يتم الرفع ثم الجزء الثاني من الدالة وهو الهدف أو الصورة التي استقبلناها من الفورم. في حالة تنفيذ 
عملية الرفع سيتم الدخول ما بين السطور ٠٠‏ و YA‏ وهي رسالة نجاح عملية الرفع ورابط الرجوع للصفحة الرئيسية. مالم في حالة حدوث خطأ يتم 
الدخول إلى else‏ ويتم عمل رسالة خطأ. 
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: view.php صفحة‎ 


«body» 
«div style-"direction:rtl;"» 
<center> 
<?php 
Scon-mysqli connect ("localhost","root","","pic"); 
if (mysqii connect errno()) 
1 
echo "Failed to connect to MySQL: " . mysqli connect error():; 
} 


Sresult = mysqli query ($con, "SELECT * FROM pic"); 


while ($row = mysqli fetch array(Sresult)) 
0 
echo "«img src-images/".Srow['photo'].' height-"120" width"80"»'; 
echo "«br»"; 
echo الاسم"‎ :".Srow['name']; 
echo " «br» -—-—-—-—-—-—-—-————————————————————————————————--- "S 
echo "«br»"; 
} 
mysqli_close ($con); 
?> 
</center> 
</div> 
</body> 
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في هذه الصفحة كود عادي ومتكرر لما تعلمناه وطبقناه مسبقا الجديد فيه كيفية وطريقة إخراج الصورة من قال عدة البيانات. وهي في سطر ۲١‏ قمنا 
بعمل كود إخراج وكما تلاحظ أن أي كود HTML‏ ضمن صفحة PHP‏ لابد أن يكون بين حاصرتين " " وأيضا في حالة كان كود HTML‏ وصادف 
أن خصائصه تتطلب حاصرتين نقوم بعمل حاصرتين متغيرتين عن الحاصرة التي بدأناها كما حددنا للطول والعرض في نهاية الجزء. وكما نلاحظ في 
الجزء الأول : 


Echo "<img src-images/" 
وهذا الجزء يشير إلى مكان الصورة أو المجلد والجزء الثاني:‎ 
$row['photo'] 


ويشير لاسم الصورة التي تم رفعها للمجلد ونستدعي اسمها من قاعدة البيانات» في الجزء الأخير تم تحديد الطول والعرض لنستطيع التحكم في مقاسات 
الصور '»"80 heightz" 120" width"‏ '. 


في سطر Y Y‏ نقوم بعمل سطر جديد ثم في سطر ۲۳ إخراج الاسم ثم في سطر Y f‏ سطر جديد بالإضافة الى خط فاصل وبعده ايضا سطر جديد في سطر 
5 وسيكون شكل الصفحة بعد تعبئة البيانات كما في الصورة: 
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E 3 Q | Û localhost/images/view.php FH « © 7 & هاا ف‎ = 
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بما أن المواقع الالكترونية تقوم بعرض بيانات سواء كانت خاصة بمؤسسة أو مواقع اخبارية فلابد لهذه المواقع ان يكون لها صفحات تدير البيانات من 
حيث الادخال والتعديل وغيره. وبما أن هذه المهام يقوم بها مدير الموقع فقط فلا بد من حماية هذه الصفحات وتقييد الوصول إليها بحيث لا يصل اليها الا 
مدير الموقع فقط وليس أشخاص آخرين. 


في المواقع الالكترونية تم إيجاد وسائل للحماية منها طريقة ال SESSION‏ وترجمتها باللغة العربية ( الجلسات ) وأيضا الى نوع آخر data‏ لها وهي 
وسيلة ال COOKIES‏ وترجمتها الكعكات. ويفضل تسميتها كماهي باللغة الانجليزية. 


الحماية بواسطة ال SESSION‏ 


لحماية الصفحات التي نريدها نقوم بعمل كود SESSION-‏ يجب تفعيل الخاصية بواسطة الكود التالي : 


1 «?php 
2 session start(): 
3 ?» 


يتم وضع الكود في بداية الصفحة تماما وهو شرط أساسي ومعناها البدء بتفعيل „SESSION‏ بعد تفعيل SESSION‏ نقوم بتعيين متغير 
SESSION-‏ وسيقوم السرفر بعمل (unique identification number)‏ وتعني رقم وحيد او فريد لكل مستخدم مخزنة في السرفر. ويكون ذلك 
بالكود التالي : 


13 $ SESSION['me']-'YES'; 


كما في الكود أعلاه نقوم بتسمية SESSION-‏ الخاصة بنا وهنا اسميناه me‏ ثم قمنا بعمل قيمة معين وهي YES‏ في .me SESSION-!‏ وهذه 
القيمة هي التي تسمح بتصفح الصفحات المحمية. 


كما يمكننا إلغاء Al ss SESSION-‏ الدالة ) session. destroy(‏ كما في الصورة التالية: 


session destroy():; 
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SESSION.II تطبيق‎ 


قبل البدء بالتطبيق 9 (Jae‏ مثال لحماية الملفات نقوم بتفعيل خاصية (output buffering)‏ في السرفر الخاص بنا wamp server‏ من اعدادات 
php-!‏ كما في الصورة التالية : 


" 1 Acobal  (XDebug): Remote debug 


qT |2| m] 4 — (XDebug): Profiler 
(XDebug) : Profiler Enable Trigger 


Sua ui] سه «رئيسيه‎ 
7 هر‎ + ۱١|” Arial أس أساسى)‎ HS B 


a 


Eo] 5 "‏ 
أبجد هون أبجد هوز أبجد هوز ‏ ابجد هوز e AA | dece Am‏ 


n 5 » 5 A à - pi 
> تحدية‎ lt ده‎ 2١ العنوان عتوان قرعى‎ Y عتوان‎ Y ل ¶ بلا تباعد عتوان ۱ عتوان‎ "99 | ¥ short open tag X x her U Z [E] T" لصق‎ 
أتماط 0 تحرير‎ E asp tags خط‎ E الحافظة‎ 
E] I9 BA 1 17: 1716: 1:15: 1 0147 1:13: 0:12: 011: 1710: 1:95 1: 8:10:77 17 output buffering EON z 
E T— Uv CEU —3X———, 4c T m X ykcompliance ي‎ i " 
يفضل تسميتها كماهي باللغة الانجليزية.‎ zlib output compression 


implicit flush 


allowc call time pass reference 
safe mode 
¥ expose PHP 


: 200 display errors 
: يجب تفعيل الخاصية بواسطة الكود التالي‎ SESSIO y rtu ems 


log errors‏ يا 
«?php 5 2‏ 
session start():; ignore repeated errors‏ 


^ ignore repeated source 


¥ report memleaks 
نقوم بتعيين متغير‎ SESSIONI بعد تفعيل‎ SESSION ا شرط أساسي ومعناها البدء بتفعيل‎ track errors 


(unique identification — '*9ister9lobals‏ وتعني رقم وحيد او فريد لكل مستخدم مخزنة في السرفر, ويكون 
register long arrays‏ 


register argc argv 


[1s | $ SESSION['me']*-'YES'; magic quotes عمو‎ Powered by Alter Way. 
i magic quotes runtime E) Localhost 
وهذه‎ me SESSION- في‎ YES ثم قمنا بعمل قيمة معين وهي‎ me لخاصة بنا وهنا اسميناه‎ magic quotes sybase 
enable di 
¥ file uploads ١ عم‎ Apache 
¥ allow url fopen Version m 


allow url include 
من‎ wamp server في السرفر الخاص بنا‎ (output buffering) بتفعيل خاصية‎ agi ت‎ 3 dà F. PHP extensions 


: كما في الصورة التالية‎ php ادات‎ E 


-| php.ini 
[E] PHP error log 


Start All Services 
Stop All Services 
Restart All Services 


WAMPSERVE, 


[u]‏ >« ه »اص 


V Q% ms Bl العربية (اليمن)‎ C$ | 6 


كما في الصورة أعلاه نقوم بعمل كليك بالأيسر على ايقونة السرفر اسفل الشاشة على اليمين ثم نختار output — PHP settings - PHP‏ 
buffering‏ والضغط عليها إن لم نجد علامة صح امامها. 


مثال بسيط لإيصال الفكرة: 
سنقوم بعمل مجلد اسمه session‏ داخل مجلد www‏ وعمل صفحتين ) simple.php - simple2.php‏ ) . 


في صفحة simple.php‏ : نقوم بعمل كود وظيفته القيام بإنشاء SESSION‏ وخزن قيمة بداخلة ثم نقوم باستدعائها وإخراج القيمة . وسيكون الكود 
كما في الصورة التالية: 


1 «?php 

2 session start():; 

3 $ SESSION['me']-'YES'; 

4 

5 echo 'Your SESSION value is : '. $ SESSION['me']:; 
6 ?» 


في سطر ۲ تم عمل كود تفعيل SESSION-!‏ من خلال الدالة session start()‏ ثم في سطر Y‏ أسندنا قيمة داخل SESSION-‏ الذي أنشأناه وهو 
me‏ والقيمة هي YES‏ في سطر o‏ طلبنا إخراج القيمة الموجودة في „me SESSION-‏ هنا سيقوم بإخراج القيمة YES‏ . 


وسيكون التطبيق كما في الصورة : 


Your SESSION value is : YES 
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في الصفحة simple2.php‏ سنقوم بعمل إنهاء SESSIONI‏ الذي أنشاناه في الصفحة السابقة ونطلب إخراج القيمة هل سيتم إخراجها أم Y‏ 
وسيكون الكود كما في الصورة: 


«?php 
session_start (); 


unset ($_SESSION['me']); 

session_destroy(); 

echo 'Your SESSION value is : '. S SESSION[ 'me']; 
?» 


في سطر ۲ طلبنا تفعيل SESSION-‏ ثم في سطر ؛ قمنا بعمل إفراغ me SESSION-!‏ الخاص بنا بواسطة دالة cunset()‏ في السطر o‏ قمنا 
بعملية إنهاء أو تدمير SESSIONI‏ بشكل عام. في سطر 1 طلبنا إخراج القيمة الموجودة في me SESSION-‏ وسيكون التطبيق كما في 
الصورة: 


Your SESSION value is : 


كما في الصورة أعلاه لم يتم إخراج القيمة لأنه قد تم إفراغها وتدمير SESSION-‏ 


تطبيق الحماية بواسطة SESSION‏ : 


سنقوم بعمل تطبيق عملية الدخول للوحة تحكم مبسطة وتطبيق تقنية SESSION!‏ .نقوم بعمل alaa‏ داخل ملف www‏ ونسميه session]‏ مثلا أي 
أسم للمجلد. ويحتوي الصفحات التالية: 


صفحة index.html‏ وستحوي فورم تسجيل الدخول. 

صفحة login.php‏ والتي تحوي كود التأكد من كلمة المرور وايضا بدء عملية ال519551017. 

صفحة document.php‏ وهي الصفحة المحمية المحمي الذي لا يمكن الوصول له الا بعد التأكد كلمة المرور وبدء عملية SESSION-‏ . 
صفحة logout.php‏ وهي الصفحة التي تقوم بعملية إنهاء أو إلغاء SESSION-‏ 


وكما في الصورة تظهر الملفات داخل المجلد: 


Name Date modified Type Size 

"i document Y-M/.i/|&Ra-ETE PHP Script 1KB 
© index Y-1E5/«E/1۹p «1:1» — Chrome HTML Do... 1KB 
™ login 7١15/١5/15م‎ LT. PHP Script 1KB 
"I logout 7١15/١5/15م‎ -£:Y0 PHP Script 1KB 


MOBILE: 00967 714490030 MERI m 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


index.html Asia 


ستقوم صفحة index.html-!‏ بعملية أخذ البيانات وهي اسم المستخدم وكلمة المرور بواسطة الفورم الذي وبواسطة دالة POST-‏ تقوم بنقل 
البيانات إلى login.php‏ وسيكون الكود كما في الشكل التالي: 


«div style-"direction:rtl;"» 
<center> 
<21/>تسجيل الدخول<1!>‎ 
«form method-"post" action-"login.php"» 
اسم المستخدم‎ 
«input type="text" name-"username" /» 
«br /» 
2322! كلمة‎ 
«input type-"password" name-"password" /» 
«br /» 
«/p» 
«input type="submit" value-"Jj, sa" /» 
</form> 
</center> 
</div> 
</body> 


كما تلاحظ الصورة أعلاه أكواد بسيطة تعلمنا مسبقا عملها › نلاحظ في سطر ٠١‏ استخدمنا بداية الفورة واستخدام الطريقة POST‏ والأكشن حددنا لها 
الصفحة login.php‏ . في سطر”١‏ إلى ۲١‏ عملنا حقول لاسم المستخدم وكلمة المرور وتم تعيين name-ll‏ للحقول ثم زر submit‏ وأغلقنا الفورم 
في سطر Y Y‏ سيكون شكل الصفحة كما في الصورة التالية : 


localhost/session1/index.html Pi 


: login.php صفحة‎ 


تقوم هذه الصفحة بعمل مقارنة بالبيانات التي سيتم ادخالها مع اسم المستخدم وكلمة المرور في الصفحة نفسها بإمكاننا تغييرها كما نريد بعد عملية 
المقارنة وتحقق الشرط يتم إظهار رابط للصفحة المحمية ويتم الوصول لها. في حالة عدم تحقق الشرط يتم اخراج رسالة خطأ. وسيكون الكود في 
صفحة Jogin.php‏ كما في الصورة: 
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«?php 

session start(): 

2> 

«html xmlns-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
«title»ix kal) الدخول‎ </title> 

</head> 

<body> 

<?php 

if(S POST["username"]—-"admin" && $ POST["password"]--"123")( 


$ SESSION['me']-'YES'; 

:"تم الدخول echo"eLais‏ 

echo"«a href-'document.php'», ax jl Ala Ji «/a»"2 
) 


elset 

session start(); 

S SESSION['me']-'NO'; 
echo"lns SLia"; 


19 
20 
21 
22 
23 
24 


في السطر ١‏ إلى Y‏ تم عمل الكود الخاص SESSIONY‏ وتم وضعه في بداية الصفحة. في سطر ٠١‏ تم البدء بعمل الكود e‏ في سطر ١١‏ قمنا بعمل 
الشرط الخاص بالمقارنة داخل قوس الشرط كتبنا POST["username'']‏ $ إذا كانت )==( وتعني تساوي "admin"‏ أي أننا استقبلنا العبارة 
المدخلة أو اسم المستخدم من صفحة index.html‏ بواسطة الدالة $_POST‏ للحقل username‏ ثم بعمل المقارنة == ثم حددنا الاسم admin‏ 
كاسم المستخدم ويمكنك تعيين الاسم كما تريد. ثم (&&) وتعمي (و) ثم عملنا مقارنة أخرى للباسورد Y Y Y‏ الذي قمنا بتعيينه ككلمة مرور. 


في حالة تحقق الشرط وتم إدخال اسم المستخدم وكلمة المرور وكانت مساوية ل (admin-123)‏ سيتم الدخول لما بين القوسين ]( في سطر VY‏ تم 
عمل SESSION-!‏ الخاص بنا وتم تعيين الاسم me‏ وتم تخزين القيمة Y ES‏ والتي تسمح بتصفح الصفحات المحمية. في سطر ؛ ١‏ يتم عمل رسالة 
بانه تم الدخول بشكل صحيح. في سطر ٠١‏ قمنا بعمل رابط للصفحة المحمية وهي c document.php‏ في سطر ١5‏ أغلقنا القوس. 


في سطر else ١8‏ في حالة عدم الدخول بشكل غير صحيح يتم عمل الاجراءات ما بداخل القوسين الخاصة elses‏ وهي كالتالي : في سطر ١5‏ البدء 
بتفعيل SESSION-!‏ بواسطة session start();‏ ثم في سطر ٠١‏ يتم خزن قيمة NO‏ داخل SESSION-!‏ وهي القيمة الخاصة بمنع التصفح 
للصفحات المحمية. ثم في سطر ۲١‏ إخراج رسالة خطأ. في v‏ أغلقنا الكود. 


بعد المرور بشكل صحيح وادخال اسم المستخدم وكلمة المرور الصحيحتين ستظهر الصفحة كما في الصورة : 


^ 


Œ | [5 localhost/session1/login.php 


تم الدخول ينجاحالملق المحمي 


يقوم المستخدم بالضغط على الرابط (الملف المحمي) والذي يوجهنا إلى الصفحة document.php‏ وهي الصفحة المحمية. 
صفحة document.php‏ 


هذه الصفحة هي مثال للصفحات المحمية داخل الموقع والتي لا يصل اليها المتصفح العادي وانما مدير الموقع او من هو مخول بذلك »ومن خلال مثالنا 
هذا وبعد ان يدخل الموقع بشكل صحيح وبعد ادخال كلمة المرور بشكل صحيح ستظهر وبعد الضغط على الرابط (الصفحة المحمية ) ستظهر كما في 
الصورة: 
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€ © | [5 localhost/session1/document.php 


وكود الصفحة كما في الصورة التالية : 


«?php 
session start (); 
1£ {$ SESSION['me']!-'YES')( 
header ("location: index.html") ; 
} 
2> 
<html> 
<head> 
<meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
</head> 
<body> 
البياتات المحمية<2>‎ </p> 
<a 22628-71090011 <3/>تسجيل الخروج<"222.‎ 
</body> 
</html> 


كما نلاحظ في الصورة أعلاه في السطر ١‏ بدأنا كود بي اتش بي وفي سطر ۲ بدأنا بتفعيل SESSION‏ »في سطر Y‏ قبل عرض محتوى الملف 
المحمي تم عمل هذا الشرط للتأكد من القيمة YES‏ في SESSION-‏ ووضعنا شرط if($ SESSION['me']!z' YES")‏ ويعني إذا كان قيمة 
me. SESSION-‏ لا تساوي YES‏ (حيث -! معناها لا تساوي) في هذه الحالة نقوم بتحول المستخدم إلى صفحة index.html‏ ونمنع عرض 
المحتوى نهائيا حتى يكون معاكس للشرط. في حالة كان نعم أي أنه يساوي YES‏ نقوم بالانتقال للأسطر الأخرى وهي عرض محتوى الملف. بكامله. 
نلاحظ في سطر ١‏ رابط مكتوب فيه (تسجيل الخروج) بعد ان ينتهي المستخدم من ما يريد في الملف المحمي يقوم بإغلاق الملف بواسط الضغط على 
الرابط (تسجيل الخروج) وهنا يأتي دور صفحة logout.php‏ والتي تقوم بعملية إلغاء SESSION-‏ نهائيا. 


logout.php صفحة‎ 


في هذه الصفحة تتم عملية تدمير أو إنهاء SESSION-‏ والتي تسمح بتصفح الملف المحمي والفائدة هنا أنه اذا قام مدير الموقع بالدخول للوحة 
التحكم أو الصفحة المحمية وأنهى عمله عليها يقوم بتسجيل الخروج كيف لايتم الوصول للصفحة من أشخاص آخرين» لذلك تسجيل الخروج هي عملية 
تدمير SESSION!‏ أو الجلسة. 


كود الصفحة logout.php‏ 


«?php 
session start(); 


unset(S$ SESSION['me']): 
session _ destroy (); 
header ("location: index.html") ; 
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كما نلاحظ الكود أعلاه في سطر ١‏ بدأنا كود بي اتش بي » في سطر ۲ بدأنا بتفعيل SESSION-‏ في سطر ؛ قمنا بعمل Alla‏ إفراغ القيمة نهائيا من 
SESSION-!‏ عدم الخاصة بنا بواسطة الدالة ) )64ع25ن. في سطر ^ o‏ تمنا بإنهاء أو تدمير SESSIONI‏ للموقع بواسطة الدالة 
c session, destroy()‏ في سطر 1 يتم التحويل للصفحة الرئيسية index.html‏ . 


ملاحظة (حاول الوصول للصفحة document.php‏ بواسطة الرجوع لها بالرابط او الرجوع للخلف بواسطة المتفصح بعد تسجيل الخروج هنا تكمن 
أهمية (SESSION-!‏ 


(COOKIES) الكوكيز‎ 


الكوكيز عبارة عن ملفات نصية يقوم السرفر بحفظها على جهازك عند الدخول لموقع معين ويتم التعرف على الكوكيز مرة أخرى في حالة التصفح لنفس 
الموقع وبتعرف السرفر عليك أو على جهازك من خلال الملفات التي وضعها على جهازك سابقا. 

عند تصفحك لموقع يدعم الكوكيز ودخولك بشكل صحيح يقوم السرفر بعمل ملف كوكيز صغير جدا لا يتجاوز حجمه € كيلوبايت في جهازك بأمر من 
السرفر للمتصفح. عند خروجك من الموقع وعودتك مرة أخرى يقوم المتصفح التابع لك Qua jo‏ الكوكيز للسرفر فيتعرف عليك السرفر فيتم دخولك 
للموقع مباشرة دون طلب لكلمة السر. وهذا ما نجده في المواقع الشهيرة التي نستخدمها فمثلا فيس بوك أو تويتر أو بريد الكتروني عند دخولنا للموقع 
وإغلاقه دون أن نقوم بعمل تسجيل خروج فإن ملف الكوكيز يضل مخزن في ملف بواسطة المتصفح بحيث اذا تم الدخول مرة اخرى للموقع يتم الدخول 
مباشرة دون طلب لكلمة المرور. 


الفرق بين ال SESSION‏ والكوكيز COOKIES‏ 


تخزن الكوكيز في جهاز الكمبيوتر وتخزن ملفات السيشن في السرفر والأكثر استخداما هو الكوكيز ونستطيع التحكم بالوقت الخاص بالدخول للموقع من 
خلال الكوكيز خلافا للسيشن عند الدخول للموقع من خلاله ونسيان عمل تسجيل الخروج بالامكان الوصول للموقع ولو لبعد وقت طويل . بينما في 
الكوكيز يتم تعيين وقت معين للسماح بالوصول للملفات المحمية مثلا £ Y‏ ساعة أو > ساعات أو Y‏ ساعة فقط حسب نحدده نحن. 


طريقة إنشاء الكوكيز: 


طريقة إنشاء الكوكيز بسيطة جدا وهي عن طريق دالة في موجودة في PHP-‏ وهي دالة ) setcookie(‏ الوصورة العامة للكوكيز هي كالتالي : 


setcookie(name, value, expire, path, domain); 


كما نلاحظ أعلاه الصورة العامة للكوكيز حيث : 

name‏ : اسم ملف الكوكيز. 

Value‏ : وهي القيمة المخزنة للكوكيز. 

Alea :Expire‏ انتهاء ملف الكوكيز. 

0 : وهو مسار المكان الذى سيتم ارسال الملف اليه على السيرفر. 


0min‏ هو اسم الموقع الذي يمكن له الوصول لملف الكوكيز والتعديل عليه. 
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معظم الخيارات أعلاه في إنشاء الكوكيز اختيارية وسيتم إنشاء الكوكيز والتعامل معها عن طريق بعض الخصائص المهمة والتي نحتاج لها في إنشاء 
صفحاتنا المحمية. كما ننوه إلى أهمية وضع كود الكوكيز قبل المحتوى في بداية الصفحات المحمية بنفس طريقة السيشن. 


* g < ||| ++ / يا‎ 
++ ++ 


كما قمنا بعمل السيشن سابقا سنقوم بعمل الكوكيز بدلا عنها وعلى نفس المثال السابق وبدلا من استخدام السيشن سنستخدم الكوكيز. وسيكون لدينا f‏ 
ملفات وهي : 

index.html‏ : صفحة إدخال البيانات (كلمة المرور والمستخدم). 

:Login.php‏ عملية المقارنة لكلمة المرور وعملية التصريح بعمل الكوكيز. 

:Document.php‏ الملف المحمي. 


Logout.php‏ : ملف تسجيل الخروج وإنهاء الكوكيز. 


سنقوم بعمل مجلد اسمه cookies‏ داخل المجلد www‏ وسنضع الصفحات المذكورة أعلاه في هذا المجلد كما في الصورة : 


0/499 » Computer » LocalDisk(C:) » wamp » www » cookies 


Organize > Include in library v Share with v Burn New folder 
- E i ~ - 
"S Favorites Name Date modified Type Size 
BE Desktop ®) document Y-M/.£/Y|g-C:6. PHP Script 1KB 
Jg. Downloads © inde YALE a Tte Chrome HTML Do... 1 KB 
i| Recent Places **: login Y-\E/«E/Y p «oor PHP Script 1 KB 
"> logout Y.) p «0:1۹ PHP Script 1 KB 


: index.html صفح‎ 


تحوي هذه الصفحة الفورم الخاص باسم المستخدم وكلمة المرور هي نفس الصفحة تماما التي تم شرحها في السيشن كما في الصورة : 


e © | D localhost/cookies/index.html DIE + ا‎ © > 


تسجيل الدخول 


PESE uad 
| كلمة المرور‎ 
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صفحة login.php‏ : 
تحوي هذه الصفحة عملية المقارنة لاسم المستخدم وكلمة المرور وهي نفس صفحة السيشن باختلاف الكوكيز فقط كما نشاهد الكود : 


«?php 


if(S POST["username"]--"admin" && S POST["password"]--"123") 
1 

setcookie('me','YES',time() + 3600); 

"تم الدخول يتجاح" echo‏ 

echo "<a href-'document.php'»,axa i! :"<3/>الملقف‎ 


1 
2 
3 
4 
5 
6 
8 


) 
else 
1 


wW 


echo"lns JLia"; 


في سطر Y‏ تم عمل المقارنة واستيراد البيانات من الصفحة index.html‏ بواسطة دالة POST‏ في حالة تم الدخول بنجاح وكانت كلمة المرور 
صحيحة يتم الدخول لما بين القوسين ifl‏ (ما بين سطر ؛ وسطر ^( في سطر o‏ بدأنا باستخدام الكوكيز فبواسطة الدالة setcookie()‏ قمنا بعمل 
كوكيز للمستخدم فكما نلاحظ أسمينا الكوكيز me‏ ثم عملنا له قيمة وهي YES‏ ثم حدد الوقت بواسطة () time‏ واعطينا قيمة للوقت وهي 3600 + 
وتعني "٠٠٠١‏ ثانية وتعني ساعة كاملة حيث ضرب ٠١‏ ثانية في ٠٠‏ دقيقة يصبح "٠٠٠‏ », وهكذا يتم التصريح للدخول وبالوقت المسموح. في سطر " 
رسالة النجاح في الدخول للملف. في سطر ۷ رابط للملف المحمي. 


في حالة عدم تطابق كلمة المرور من خلال الشرط if‏ يتم الدخول إلى else‏ ومابين القوسين الخاص بها ففي سطر ١١‏ تظهر رسالة الخطأ. 


document.php Asia 


هذه الصفحة هي الصفحة المحمية من خلال الكوكيز وسيكون a SII‏ الخاص بها كما في الصورة : 


«?php 
fF ($_COORIE ] ['عس؟'‎ !-' YES") 4 
header ("location: index.html") ; 


«meta http-equiv-"Content-Type" content="text/html; charset-utf-8" /» 
</head> 

<body> 

</p>‏ انبياتات المحمية<2> 

<a href="1ogout.phP">جgjëخنil <3/>تسجيل‎ 

</body> 

</html> 


كما نلاحظ في الكود أعلاه في سطر Y‏ تم عمل شرط وهو في حالة كانت قيمة الكوكيز ليست YES‏ يتم الدخول مابين القوسين لل16 ويتم التنفيذ للسطر 
Y‏ وهو تحويل المستخدم مباشرة لصفحة الدخول index.html]‏ وعد اظهار الملفات المحمية. وفي حالة كانت القيمة YES‏ يتم الاستمرار في الكود 
للصفحة وعرض ما فيها. 


في سطر ١١‏ عرض للرابط (تسجيل خروج) وهو التوجه للصفحة ogout.php‏ 
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: logout.php صفحة‎ 


كما لاحظنا الرابط أعلاه (تسجيل الخروج) عندما يقوم المستخدم بإتمام ما يريد في الصفحة المحمية يتم الضغط على تسجيل الخروج لإنهاء الجلسة على 
الصفحة وإغلاقها يأتي هنا دور الصفحة logout.php‏ والتي تقوم بعملية إنها الوقت الخاص بتصفح الصفحة المحمية. والكود كما في الصورة: 


«?php 
2 setcookie('me','YES',time() - 3600); 
3 header ("location: index.html") ; 
4 ?» 


كما نلاحظ الكود في سطر Y‏ تم تعين قيمة الوقت الخاصة بالكوكيز وهي 3600- أي إلغاء الوقت الذي تم التصريح به مسبقا لنفس الكوكيز والقيمة التي 
أنشأناها. ويتم التوجيه مباشرة بعد تسجيل الخروج إلى صفحة البداية index.html‏ حسب السطر Y‏ 


ملاحظة : تعتبر الكوكيز والسيشن من اهم المواضيع في alle‏ المواقع الالكترونية والتي تعتمد عليها جميع المواقع الكبيرة؛ بالإضافة إلى أننا استخدمنا 
امثلة بسيطة حولهما كما ننوه إلى أن هناك طرق أكثر أمنا من الدالة POST‏ سيتم استخدامها ان شاء الله في التطبيق العام والأخير في هذا الفصل. 


jQuery‏ الجي كويري 


JQUERY‏ هي عبارة عن مكتبة مجانية في الجافا سكربت مبرمجة بواسطة المبرمج John Resig‏ وتحوي هذه المكتبة الكثير من الأكواد الجاهزة 
والتي تسمح لنا بإضافة تأثيرات جميلة على صفحات المواقع الالكتروني.( الجي كويري عبار عن أطواد من الجافا سكربت.) 


سنقوم هنا بالتعرف على تطبيقات الجي كويري وفائدتها على المواقع الالكترونية من حيث إضافة المؤثرات والجماليات على الموقع بالحركة والشكل 
علما ان تطبيقات الجي كويري تحتاج لشروح كثيرة حتى يتم إتقانها والاحتراف في انشاء تطبيقات متحركة ومؤثرات وهنا سنتعلم كيف نستفيد من هذه 
التطبيقات فقط وكيف نقوم بتركيبها ومن أين نحصل عليها. 


إضافة مكتبة الجي كويري 


في البداية قبل إضافة أي كود أو أي تأثيرات من الجي كويري لابد من تحميل المكتبة الخاصة jquery-‏ (ملف جافا سكربت) من الموقع الرسمي لها 


أو أي موقع آخر يدعمها /http://jquery.com‏ كما في الصورة : 


€ © [Î jquery.com THF + ا‎ © 7 E 


Plugins Contribute Events Support jQuery Foundation 


jQ ue [Y Save time, save money. (O) Browserstack 


araire Test in 300+ browsers, 8+ OSes, 
wri , re. and 50+ mobile devices. 


Try it for free 
Trusted by the jQuery team LU S) 


Download API Documentation Blog Plugins Browser Support Search 


Download jQuery 


v1.11.0 or v2.1.0 
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كما في الصورة أعلاه نقوم بالضغط على الزر البني الكبير (Download jQuery)‏ »سيتم فتح صفحة آخرى كما في الصورة : 


jQuery 1.x 


The jQuery 1.x line had major changes as of jQuery 1.9.0. We strongly recommend that you also use the jQuery Migrate plugin if you are upgrading 
from pre-1.9 versions of jQuery or need to use plugins that haven't yet been updated. Read the jQuery 1.9 Upgrade Guide and the jQuery 1.9 
release blog post for more information. ] 


Download the compressed, production jQuery 1.11.0 


Download the uncompressed, development jQuery 1.11.0 


Download the map file for jQuery 1.11.0 


jQuery 1.11.0 release notes 


jQuery 2.x 


jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8 All the notes in the jQuery 1.9 Upgrade Guide apply 
here as well. Since IE 6/7/8 are still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting 
the site. Please read the 2.0 release notes carefully 


Download the compressed, production jQuery 2. 


Download the uncompressed, development jQuery 2.1.0 


Download the map file for jQuery 2.1.0 


jQuery 2.1.0 release notes 


نضغط على الرابط الأول في jQuery 2.x‏ . بعد الضغط على الرابط )2.1.0 (Download the compressed, production jQuery‏ 
ستظهر الصفحة التالية : 


e>» كت‎ [ codejquery.com/jquery-2. 1 O-m in د‎ E < ¥ 22 


/*! jQuery v2.1.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ 

!function(a,b)("object"--typeof module&&"object"--typeof module.exports?module.exports-a.document?b(a,!'0):function(a)(if('a.document)throw new Error ("jQuery requires 
a window with a document");return b(a)):b(a))("undefined"'-typeof window?window:this,function(a,b) {var [],d7c.slice,e-c.concat,f-c.push,g-c.indexOf,h- 
(),i-h.toString, j-h.hasOwnProperty, k-"".trim,1-(),m-a.document,n-"2.1.0",o-function (a,b) (return new o.fn.init(a,b)]),p-/^-ms-/,q-/- ([Nda-z]) /gi,r-function (a,b) (return 
b.toUpperCase());0.fn-0o.prototype-(jquery:n,constructor:o,selector:"",length:O,toArray:function()(return d.call(this)),get:function(a) (return null!-a?0»a? 
this[asthis.length]:this[a]:d.call(this)),pushStack:function(a) {var b-o.merge(this.constructor(),a);return 
b.prevObject-this,b.context-this.context,b),each:function(a,b) (return o.each (this, a,b) !,map: function (a) {return this.pushStack(o.map(this,function(b,c) (return 
a.call(b,c,b))))]),slice:function()(return this.pushStack (d.apply (this, arguments) ( 7 , first: function () {return this.eq(0)},last: function () (return 
this.eq(-1)),eq:function(a)(var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c»-0&&b»c?[this[c]]:[]) ), end: function () {return 

this.prevObject||this.constructor (null)),push:f,sort:c.sort,splice:c.splice),o.extend-o.fn.extend-function() {var a,b,c, d,e, f, g=arguments [0] | | 
(),h-1,i-arguments.length,j-!1;for("boolean"--typeof 066 (j=g, g=arguments [ط]‎ | | {}!,h++) , "object"==typeof g| |o.isFunction (g) | | ((4>و)‎ , =i && (g=this, h--) ;i>h;h++) if (null != 
(a-arguments[h]))for(b in a)c-g[b],d-a[b],g'--d&& (j&&d&& (o.isPlainObject (d) | | (e=o.isArray (d)))? (e? (e=!1, f=cé&o.isArray (c) ?c: []) :f=cé&o.isPlainObject (c)?c: 
(),g[b]2o.extend(j,f,d)) :void 0!--d&& (g[b]=d) ( ;return g},o.extend ) {expando: "jQuery"+ (n+Math. random )( ( .replace (/\D/g, ""),isReady:!0,error: function (a) (throw new 

Error (a)},noop: function () {}, isFunction: function (a) {return"function"===o. type (a) ( , isArray:Array.isArray, isWindow: function (a) {return 
null!-a&&a---a.window),isNumeric:function(a) (return a-parseFloat (a) >=0}, isPlainObject: function (a) 
iif("obiect"!--o.tvpe(allla.nodeTvpello.isWindow(a))return!i;trvíif(a.constructor&&!j.call(a.constructor.Dprototype, "isPrototvpeOf") ( return!1}catch ib) 


| HL 


بعد ظهور الصورة أعلاه وهو في الاصل الملف الذي نريد تحميله نقوم بعملية حفظ الملف من خلال الضغط على حفظ باسم من خلال المتصفح كما في 
الصورة : 


€ > CŒ [5codejquery.com/jquery-2.1.0.minjs خا + 2ه مه‎ r4 PME 


/*! jQuery v2.1.0 | (c) 2005, 2014 3Query Foundation, Inc. | 3query.org/license */ New tab CtrieT 
!function(a,b)í"object"--typeof module&&"object"--typeof module.exports?module.exports-a.document?b (a, !0) : function (a) {if (!a.document) thr; New window Ctrl+N 
a window with a document") ;return b (a) }:b (a) } ("undefined"!=typeof window?window: this, function (a,b) {var c=[],d=c.slice,e=c.concat,f=c.pus 


(),i-h.toString, j-h.hasOwnProperty, k="".trim,1={},m=a.document, n="2.1.0", o=function (a,b) (return new o.fn.init (a,b) },p=/^-ms-/,q=/-{[\daṣ4 ا ا ا‎ 
b.toUpperCase());0.fn-o.prototype-(jquery:n,constructor:o,selector:"",length:O,toArray:function() (return d.call (this) }, get: function (a) {¥ Bookmarks ٠ 
this [a+this.length] :this [a] :d.cal1l (this) },pushStack: function (a) {var b-o.merge(this.constructor(),a);return Recent Tabs 5 
b.prevObject-this,b.context-this.context,b),each:function(a,b) (return o.each(this,a,b)),map:function(a)íreturn this.pushStack(o.map (this 
a.call(b,c,b))))?),slice:function()(return this.pushStack(d.apply(this,arguments))),first:function() (return this.eq(0)),last:function()ír Edit Cut | Copy | Paste. 
this.eq(-1)),eq:function(a)(var bzthis.length,c-4a*(0»a?b:0);return this.pushStack(c»-0&&b»c?[this[c]]:[]) ), end: function () (return 

this.prevObject||this.constructor (null)),push:f,sort:c.sort,splice:c.splice),o.extend-o.fn.extend-function() (var a,b,c,d,e,f,g-arguments mu 
1),h-1,i-arguments.length,j-!1;for("boolean"--typeof g&&(j7-g,g-arguments[h]||i),h*4) ,"object"--typeof g||o.isFunction(g)||(g-()),h---i&& Zoom - |100%| + ||] د‎ 
(acarguments[h]))for(b in a)c-g[b],d-a[b],c d&& (3&&d&& (0. 18PlainObject (d) | | (e7-o.isArray(d)))?(e?(e-!1,f-c&&o.isArray(c)?c:[]):f-c&&o. i 
{},g[b]=0.extend (j, f,d)):void 0!--d&& (g[b]=d)); return g},o.extend ({expando:"jQuery"+ (n*Math.random()).replace(/MD/g,""),isReady:!O,err 
Error (a) },noop: function )( {},isFunction:function (a) (return"function" .type (a) },isArray:Array.isArray, isWindow: function (a) {return Find... Ctrl+F 
null'-a&&a---a.window)!,isNumeric:function(a)(return a-parseFloat (a)>=0},isPlainObject:function (a) 5 5 

{if ("object"!==o0. type (a) | |a.nodeType| | ه‎ . isWindow(a))return!l;try(if(a.constructor&&!j.call(a.constructor.prototype, "isPrototypeOf"))retu Print... CtrieP 
(return!1)return!O),isEmptyObject:function(a)(var b;for(b in a)return!1;return!O),type:function(a) (return null--a?a-"";"Oobject"--typeof Tools > 
h[i.call(a)]||"object":typeof a},globalEval:function(a)i{var b,c-eval;a-o.trim(a),a&&(1 a.indexOf("use strict")? 

(bzm.createElement ("script"),b.text-a,m.head.appendChild(b).parentNode.removeChild(b)):c(a))),camelCase:function(a)(return a.replace(p," History Ctrl«H 
").replace(q,r)),nodeName:function (a,b) (return a.nodeName&&a.nodeName.toLowerCase()---b.toLowerCase()),each:function(a,b,c)(var d,e-0,f- 5 
ifor(;f»e;e-*)if(d-b.apply(a[e],c),d---!1)break]else for (e in a)if(d-b.apply(a[e],c),d---!1)breaklelse if(g)ifor(;f»e;e**)if(d-b.call(a[ Downloads Cute) 
for(e in a)if(d=b.call (a[e],e,a[e]),d===!1)break;return a}, trim: function (a) {return null--a?"":k.call(a)),makeArray:function(a,b)(var c=b 

(s (Object (a) ) ?0.merge (c, "string"==typeof 27 ]2[ :a) :f.call (c,a)),c},inArray: function (a,b,c) {return null--b?-1:g.call(b,a,c)),merge:functio Sign in to Chrome... 
c-4b.length,d-0,e-a.length;c»d;d««)a[e**]7b[d];return a.length=e,a}, grep: function (a,b,c) {for (var d,e- 

[],f70,g-a.length,h-!c;g»f;f-*)d-!b(a[f],f),d!--h&&e.push(a[f]) ;return e},map: function (a,b,c) {var d,f-0,g-a.length,h-s(a),i- Settings 

]1[ : 12 (h) for (;g>f:f++) طحق‎ (a[f],f,c),null!=déé&i.push (d) ;else for(f in a)d-b(a[f],f,c),null!'-d&&i.push(d);return e.apply([],i)),guid:1,prox About Google Chrome 
c,e,f;return"string"--typeof b&&(c-a[b],bz-a,a-c),o.isFunction(a)?(ez-d.call(arguments,2),f-function() {return 

a.apply(b||this,e.concat (d.call(arguments)))),f.guid-a.guid-a.guid||o.guides,f):void 0),now:Date.now,support:1)),o0.each("Boolean Number Help 

RegExp Object Error".split(" "), function (a,b) {h[" [object "+b+"]"]=b.toLowerCase()});function 5 (a) {var 

b-a.length,c-o.type(a);return"function"---c| |o.isWindow(a)?!1:1---a.nodeType&&b?!0:"array"---c||0---b||"number"--typeof b&&b»0&&b-1 in a Exit Ctrl+Shift+Q 
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ستظهر كما في النافذة التالية : 


O save As x5] 
الثم‎ 5 / — 
(JL € li + Computer » LocalDisk(C) » wamp » www » jquery 3 [seohjuey © آم‎ 


Organize v New folder Be e 


FRR Name E Date modified Type Size 
WE Desktop 
"n Downloads 
T Recent Places 


No items match your search. 


Libraries 
[E Documents 
2 Music 
El Pictures 
H Videos 


wj Homegroup. 


E] Computer 
Ê Local Disk (C) 
cx New Volume (D:) 
cs New Volume (E) 
cx New Volume (F:) 
Î yousef's iPhone 


0 Network 


Filename: jquery-2.1 0.min 
Save as type: 


أنشأنا مجلد في www‏ وأسميناه jquery‏ لوضع المكتبة الخاصة jquery-Iu‏ فيه كما في الصورة أعلاه نضغط على حفظ (save)‏ سيظهر داخل المجلد 
كما في الصورة : 


Computer » Local Disk (C:) ١ wamp » www » jquery ~ | <, ||| Search jquery 2‏ » يل 
Organize > Include in library > Share with v Burn New folder š5 >” EH ©‏ 
Favorites Name S Date modified Type Size‏ 

BE Desktop "©! jquery-21.0.min YeM/MY p «3:0. JScript Script File 82KB 
n Downloads 


E] Recent Places 


نقوم الان بالدخول لأحد المواقع الداعمة لتطبيقات الجي كويري ومن خلالها نتعرف على تطبيقات بدائية ونقوم بتحميلها لمجلد jquery‏ والموقع هو 
على الرابط : http://www.roseindia.net/ajax/jquery/jQuerydemos.shtml‏ 


ملاحظة : في الأمثلة التالية سيتم التطرق لبعض الخصائص للتطبيقات وسيتم ارفاق جميل الملفات مع الكتاب. 
مثال :١‏ 


سنقوم بتحميل التطبيقات على المجلد وسنمر على بعض التطبيقات لنتعلم كيفية تركيبها وتشغيلها على مواقنا والتطبيق الأول هو كما في الصورة : 


D file///C/wamp/www/jquery/app2.html Y 
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yw 


في التطبيق أعلاه مثال بسيط ولكن من خلاله يمكننا عمل شيء مميز في موقعنا وفكرته في عرض وإخفاء الديف الذي يحمل النص مع اللون البرتقالي 
الغامق يقوم بإخفائه بشكل حركي جميل وكذلك العرض في هذا المثال قمنا بتحميله من موقعه الاصل ثم غيرنا بدل الجمل الانجليزي جمل خاصة بنا 
باللغة العربية ايضا ترجمنا النصوص الخاصة بالأزرار وغيرنا حسب متطلباتنا ورغبتنا والكود الخاص بالمثال كما في الصورة: 


<head> 
<style> 
span { background:#F90; padding:3px; float:left; } 1 
«/style» 
«script src-"jquery-2.1.0.min.js" type-"text/javascript"»«/script» 
«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
«/head» 
«body» 
<center> 
<button id-"hidb"»sLis|«/button» 
<button id="showb">yaye</button> 


نم GO‏ ظط ص Oy‏ ل 6 iO‏ 


«div style-"direction:rtl; height:300px; width:400px; margin:O0 auto;"» 
<span>Lı> </span> «span»i/span» <span> „</span> 
<span>óLinh5</span> <span> „JI </span> «span»,;5,s€/span» 
€«span»?j;4»s€X/span» المواقع الالكتروتية<35232>‎ </span> 


</div> 
<script> 
$ ("#hidb") .click (function () ( 
$("span:last-child").hide("fast", function )( ( 
$(this).prev().hide("fast", arguments.callee); 
$ ("#showb") .click (function () ( 


$ ("span") .show (2000) ; 
n: 


© ها‎ C -J OÓ) کل ی‎ UNP 


2 
2 
2 
2 
2 
2 
2 
2 
2 
2 
3 
3 
3 
3 


«/script» 
«/center» 


NP‏ یں ظر 


to 


دائما عندما نقوم بعمل اضافة تأثير جي كويري أو سلايدات أو أي تطبيق فأنه غالبا يتكون من ثلاثة اشياء رئيسية وهي : 


روابط الملفات أو المكتبات الخاصة بالتأثيرات والجي كويري وخاصة الجي كويري لابد من وجودة وأحيانا يتم اضافة ملفات أخرى بجانبه خاصة 
بتأثيرات معينة وكما في المثال السابق في سطر سته ربطنا ملف المكتبة الذي حملناه بالصفحة وعملية الربط هنا شبيهة بالربط مع ملف 055 . 


الدوال الخاصة بالتأثيرات وهي نفسها من تتحكم بالتأثيرات وتنتجها ومن خلالها نستطيع التحكم بالتأثيرات من خلال الوقت والطريقة وغيرها وفي 
المثال من سطر ٠١‏ إلى ۳۳ هذه هي الدوال والدوال جمع Alla‏ والدالة هي (function)‏ كما تلاحظ الاسم في الاسطر المذكورة ونأخذ من المثال الدالة 
الثانية من سطر ۲۹ إلى ١‏ لاحظ طريقة تعريف الدوال في الجي كويري مختلف عن البي اتش بي كما نلاحظ الاسم المعن للدالة (#showb)‏ الذي بعد 
علامة هاش (H)‏ اسم للدالة اذا اردنا ان نستخدم الدالة من أي ديف نقوم باستدعائها بواسطة هذا الاسم كما في السطر ٠١‏ تم استدعائها من خلال (id)‏ 
كما تلاحظ وكتبنا اسمها لذلك عند الضغط على الزر الذي يستدعي هذه الدالة تقوم الدالة بعملها او وظيفتها وهي عملية العرض. ومثلها الدالة الاخرى 
عند استدعائها والضغط على الزر الذي يستدعيها تقوم بوظيفتها وعملية الاخفاء. 


نلاحظ أيضا وظيفة الدالة في سطر ٠١‏ من خلال (() (.eliek(function‏ وتعني أن الدالة تعمل بالنقرة (click)‏ في سطر ($span) Ussa "١‏ ويعني 
هنا أن التأثير الخاص بها سيكون تطبيقه على (span)-!‏ ايضا (.show(2000))‏ وهنا كلمة show‏ تعني عرض والقيمة ٠٠٠٠١‏ هي مقدار الوقت 
لتنفيذ الوظيفة و٠ ٠١‏ تعني 7ثواني وبإمكانك التحكم بها تغييرها حيث ٠٠٠٠‏ تعني وخمس ثواني وهكذا. 


المكون الأخير وهي العناصر المطبق عليها التأثير والتي تستدعي الدوال أيضا وهي كما في الأسطر ١‏ إلى ٠١۹‏ قمنا بعمل (span)‏ متعدد والفكرة من 
التعدد هنا عمل الحركات على كل (span)‏ كلا على حده. 


MOBILE: 00967 714490030 were en 
MOBILE 2: 00967 772755202 Email: info@techpio.net لامي‎ 


مثال ۲: 


إضافة (accordion)‏ من احد الاضافات التي تضاف الى المواقع وهي كما في الصورة (بعد تعديله بالعربية والاتجاه من اليمين الى ايسار وتغيير 
النصوص) : 


& > Q [fie///C/wamp/www/jquery/app5.html woGO 4 z «wu 


كما تلاحظ الصورة أحد التطبيقات للجي كويري والكود الخاص به كما في الصورة: 


<head> 
<meta http-equiv-"Content-Type" content="text/html; charset-utf-8" /> 
<link href-"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 


ضف ضط n‏ € 


<script> 
$ (document) . ready (function() { 
$ ("Éaccordion").accordion(): 
n: 
</script> 
</head> 
<body style="font-size:62.5%;"> 


هم د 
هت ماه 
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فم‎ 


| 


tn صر‎ w N 


3 
3 
1 
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9 
0 
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<div id-"accordion" style-"width:500px; margin:0 auto; direction:rtli"» 
<h3><a href-"£"»1 jl gie</a></h3> 
<div> 


<h3><a href="#">2 jl gie</a></h3> 
<div> 
<p> 
هتا تص ...هتا تصإ‎ 
</p> 
</div> 
<h3><a href="#">3 j!,ic«/a»«/h3» 
<div> 


o» (n كلم‎ QN هم‎ 


جم فم يم يم يم يم N‏ يم يم يم يم يم نن Q‏ 


في سطر ۷-١‏ تم اضافة المكتبة واستدعائها من الموقع الذي قام بعمل التطبيق كما نلاحظ الرابط لموقع جوجل قسم الأجاكس. يمكننا الذهاب للرابط واخذ 
الملفات التي تم ربطها ووضعها في مجلدنا وهو الأفضل. وكما يظهر أمامنا الدالة في سطر ٠١‏ الى MY‏ 
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..مثال لتطبيق سلايدر 


مثال ۳: 


كما في الصورة أعلاه ولعلك قد شاهدة ما يشبه هذا التطبيق في مواقع كثيرة ويسمى (slider)‏ يقوم بالتعامل مع الصورة وعرضها كشرائح هنا مثال 
بسيط وهناك تطبيقات أكثر جمالا من التطبيق أعلاه واكثر جاذبية واحترافية ايضا. والكود الخاص به كما في الصورة: 


numeric: 
n: 
n: 
</script> 


</head> 
2 <body> 
24 <div id="container"> 
25 
26 <div id="header"> 
27 لتطييق سلايدر<21>‎ 
28 «/div» 
29 
30 «div id-"slider"» 
31 
32 «ul» 
33 «li»«img 
34 «li»x«img 
35 «li»x«img 
36 «li»«img 
37 «li»«img 
38 «/ul» 
9 «/div»«/div» 


W‏ هھ 
[s‏ 


</body> 


easySlider({ 


true 


Jla. .</h1> 


src-"images/jquery1.jpeg" alt-"Css Template 
src-"images/jquery2.jpeg" alt-"Css Template 
src-"images/jquery3.jpeg" alt-"Css Template 
src-"images/jquery4.jpeg" alt-"Css Template 
src-"images/jquery5.jpeg" alt-"Css Template 


«meta http-equiv-"content-type" content-"rext/html;charset-UTF-8" /» 
«script type-"text/javascript" src-"jquery-2.1.0.min.js"»«/script» 
«script type-"text/javascript" src-"easySlider1.7.js"»«/script» 
<script type-"text/javascript"» 
$ (document) . ready (function () ( 
$("£slider"). 
auto: true, 
continuous: true, 


«link href-"css/screen.css" rel-"stylesheet" type-"text/css" media-"screen" /» 


Preview" /»«/li» 
Preview" /»«/li» 
Preview" /»«/li» 
Preview" /»«/li» 
Preview" /»«/li» 


كما نلحظ الكود أعلاه في الدالة والتي تقوم بعملية تحريك الصور وكما نرى الخصائص الخاصة بها وهي 0ن هوتعني أن تقوم الدالة بتحريك الصور 
بشكل اتوماتيكي في حالة أعطيتها القيمة true‏ وتعني نعم أو صح . في الخاصية الأخرى continuous‏ وتعني الاستمرارية حتى لو تم تحريك جميع 
الصور والوصول للبداية مرة أخرى يتم الاستمرار في Alla‏ تم اعطاء القيمة true‏ وعكسها false‏ . الخاصية الأخيرة هي numeric‏ وتعني عددية او 
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© D file///C/wamp/www/jquery/slideWOW/index.html 


= ها ف 5 FOZ‏ # كه د 


مرحبا بكم في دورة المواقع الالكترونية 


من خلال التطبيق أعلاه نشاهد احد الامثلة الجميلة للجي كويري ودورها في إعطاء الموقع منظر جميل ومؤثرات جاذبة للمتصفحين ومن خلال المثال 


أعلاه سنقوم بتركيبه في التطبيق النهائي للباب الخاص PHP-‏ . يتكون المثال السابق من الملفات التالية (كما في الصورة): 


(XX. EE > Computer » LocalDisk(C) » wamp » www » jquery » slideWOW » ao | 


Organize v Include in library > Share with > Burn New folder = vw Fil e 
كك‎ ldem > Name s Date modified Type Size 

RE Desktop J datal Y- File folder 

Jj. Downloads J enginel Y. File folder 

| Recent Places © inde Y- Chrome HTML Do... 3 KB 


يحتوي المجلد الأول على الصور الكبيرة والصغيرة للسلايدشو ويحوي المجلد الثاني على ملفات الجي كويري وملفات الووع اما الملف index.html‏ 


N N N N N NY N 


Ne 


mn شر‎ 0) 
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فهو الملف الرئيس الذي فيه التطبيق وسيكون الكود الخاص به بعد بعض التعديلات كما في الصورة: 


«html xmins-"http://www.w3.0rg/1999/xhtml"» 
<head> 
«title»,2 ij X»/title» 
«meta http-equiv-"content-type" content-"text/html; charset-utf-8" /» 
«meta name-"keywords" content-"WOW Slider, jquery slideshow, jquery carousel" /» 
«link rel="stylesheet" type="text/css" href-"enginel/style.css" /» 
«script type-"text/javascript" src-"enginel/jquery.js"»«/script» 
</head> 
<body style="background-color:#d7d7d7"> 


<div id-"wowslider-containeri"» 

<div class="ws_images"><ul> 

<li><img src-"datal/images/chrysanthemum.jpg" alt-"1 j!,4ic" title-"4.5,,1iS JY! يكم قي دورة المواقع‎ Lep" id-"wowsl 0"/»«/li» 
«lix«img src-"datal/images/desert.jpg" alt-"2 "عتوان‎ title-"2 j!,4ic" id-"wowsl 1"/»«/li» 

«li»x«img src-"datal/images/hydrangeas.jpg" alt-"3 "عنوان‎ title-"3 j!,ic" id-"wowsl 2"/»«/li» 

«li»x«img src-"datal/images/jellyfish.jpg" alt-"4 "عنوان‎ title-"4 j!,is" id-"wowsl 3"/»«/1i» 

«li»x«img src-"datal/images/tulips.jpg" alt-"5 j!,ic" title-"5 "عنوان‎ id-"wowsi 4"/»«/li» 

«/ul»«/div» 


«div class-"ws bullets"»«div» 

«a href-"£" title-",, i5, j!,ic"»«img src-"datal/tooltips/chrysanthemum.jpg"/»1«/a» 
«a href-"£" title="; ùs j!,ic"»«img src-"datal/tooltips/desert.jpg"/»2«/a» 

«a href-"£" title-",. 1^. j!,ic"»«img src-"datal/tooltips/hydrangeas.jpg"/»3«/a» 

«a href-"£" صغير">-1516ج‎ j!,ic"»«img src-"datal/tooltips/jellyfish.jpg"/»4«/a» 

«a href-"£" title-",, i4» j!,ics"»«img src-"datal/tooltips/tulips.jpg"/»5«/a» 
«/div»«/div» 


<div class-"ws shadow"»«/div» 
«/div» 
«script type-"text/javascript" src-"enginei/wowslider.js"»«/script» 
«script type-"text/javascript" src-"enginel/script.js"»«/script» 
</body> 
</html> 
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كما نلاحظ الصورة : من سطر ۷-٠‏ ربط الصفحة بملفات الووح والجي كويري بالإضافة للأسطر .۳٠-۳۰‏ من سطر ٠۲‏ إلى سطر VA‏ خاص بالصور 
الكبيرة للسلايدشو. من سطر ٠١‏ إلى ۲١‏ خاص بالصور الرمزية الصغيرة . سطر ۲۸ خاص بالظل الذي تحت السلايدشو. 


القوالب الجاهزة 


يمكن لأي مصمم مواقع الكترونية الأن أن يستفيد من عالم الإنترنت وعالم تصميم المواقع الالكترونية فقد سهلت الكثير من المهام امام مصممي المواقع 
الالكترونية نظرا للانفتاح الكبير بين المبرمجين والمصممين في عالم الانترنت وتبادل الخبرات والتجارب في مجال تصاميم المواقع في هذا الجزء 
سنتعرف على أشياء جميلة ومساعدة سهلت لكثير ممن لا يجدون في أنفسهم الإبداع في شكل المواقع الالكترونية أن يستفيدوا منها وهي القوالب 
الجاهزة للمواقع الالكترونية . 

ماهي القوالب الجاهزة: 

عبارة عن تصاميم ويب جاهزة من حيث الهيكل الخارجي والتصميم الشكلي للمواقع مصممة بأحدث التقنيات المستخدمة في تصميم المواقع مثل ) CSS‏ 


CSS3- HTML - HTML3 - JQUERY & JAVA SCRIPT‏ — ). ويمكن لأي متخصص في عالم الويب ان يستفيد منها ويقوم بتعديل ما 
يلزم وتركيب قاعدة البيانات الخاصة بالموقع. 


كثير من القوالب تكون مجانية ولكنها في الغالب تحوي حقوق للمصمم سواء عدم التجارة بالقالب او حذف رابط المصمم او الشركة المصممة ولكن 
هناك ما هو مفتوح ايضا وبإمكانك عمل ما تريد. في المقابل ايضا هناك قوالب مدفوعة أي عليك القيام بشرائها لتستطيع التعديل عليها كما تريد ونقل 
الحقوق للملكية لك كمصمم. 


يمكن إيجاد القوالب بالبحث عنها في محرك البحث جوجل ب (free website templates)‏ صور لبعض القوالب الجاهزة : 


Ws Heading SU AE T News Heading 


News Heading 


more link 
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1 B | GY Home Services Projects Solutions Jobs Blog Contacts 


IT ALL STARTS WITH A 


ENTERTAINMENT APP 


Great Vision "la 


Launch Chat fè 
Wl Watch Movies © 


FREE Quote 


BRAINSTORM DESIGN 


nperdiet eget 


conse r adipiscina dolor e sollicitudin quis, gravida sed 1modo ac a felis 
Users/Yemen Net/Desktop/HTMLS5/digy/digy/index.html A كمه‎ - 
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MYSQL & HTML & JQUERY & CSS & PHP 
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MYSQL & HTML & CSS & PHP تطبيق عام حول‎ 


سيكون هذا التطبيق عبارة عن خلاصة ما تم تعلمه في الفصول السابقة والتعرف على اضافات أخرى ودائما قبل البدء بالمشروع لابد من تحديد ما هو 
المطلوب منا وماذا نريد بالضبط ونقصد بهذا علميا قبل الشروع بالعمل لابد من جود تحليل عام لما نريد عمله ونحدد كيف سيكون الموقع الالكتروني 
وماذا يتطلب وماهي الخطوات الأولية وهكذا حتى يتم العمل بشكل واضح ودون الوقوع في أخطأ او التعديلات المتكررة وضوح الفكرة والعمل أهم عامل 
في بناء المواقع الالكترونية. 


فكرة عامة حول التطبيق 


سنقوم بإنشاء موقع إلكتروني لرواد التكنولوجيا وللخدمات التي تقدمها »موقع لمؤسسة متخصصة في إنشاء المواقع الالكتروني وسيحوي الموقع على 
خدمات الموقع وأقسام الخدمات. لذا سنقوم بعمل جدول متطلبات ومحتويات الموقع. 


المحتوى ملاحظات 
يتم تصميم Y‏ صور رئيسية لعارض الصور (slideshow)‏ حسب مقاسات التطبيق 
E 8‏ 8 المستخدم 
يتكون الموقع من Y‏ أقسام للموقع 
(قسم المواقع والاستضافة — قسم تصميم جرافيكس — 5 


قسم الصيانة والشبكات ( PEE‏ 
جدول خاص بكل قسم في قاعدة البيانات 


تتكون القائمة من الاتي ( الرئيسية - خدماتنا - من 


أعمالنا — من نحن اتصل بنا ) 


قاعدة البيانات 


- 


الجداول ملاحظات 


جدول للقائمة ونسميه menu‏ 


جدول الأخبار news‏ 


جدول الخدمات sery‏ 


جدول مدير الموقع admin‏ 
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الصفحة الرئيسية index.php‏ 


سيتم تسمية الصفحتين لاحقا بالإضافة إلى تضمين الصفحتين بواسطة 
صفحتين لترويسة الموقع والجزء السفلي من الموقع include()‏ وهذا هو السبب لعمل الصفحتين كي لا نقوم بتكرار التصميم في 
كل صفحة ويتم الاستدعاء فقط بالدالة include‏ وكيف يسهل التعديل مستقبلا. 


صفحات أخرى حسب الاحتياج 


مجلد يحوي صفحات مدير الموقع ويحوي كلا من : 
صفحات إدارة الأقسام وتعديلها. 
صفحات مدير الموقع صفحات إدارة القائمة وتعديلها. 
صفحات إدارة المدراء وتعديله. 
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المرحلة الأولى (التصميم) 


نقوم بعمل مجلد للتطبيق وتسميه project‏ ضمن المجلد العام www‏ 


نقوم بعمل f‏ مجلدات بداية ضمن المجلد الخاص بالمشروع وهن ) (css — images - admin‏ حيث أن admin‏ مجلد صفحات مدير الموقع و 
5 للصورة المستخدمة في تصميم الموقع و ess‏ لملفات أو ملف السي اس اس وسيكون شكل المجلد project.‏ كما في الصورة: 


Name Date modified Type Size 
| لك‎ admin Y\E/-L/TV a +Y: File folder 
W css YAAL/-E/YV a «TFI File folder 
dJ images Y-VE/*E/YV م‎ «YE File folder 


نقوم بعمل صفحة رئيسية index.php‏ ضمن المجلد project‏ . وصفحة style.css‏ ضمن مجلد و. 
نقوم بتجهيز خلفية مقاس (الطول -١1٠٠١‏ العرض (Y ٠٠١‏ ونضعها في مجلد images‏ 

نقوم بعمل الخلفية للصفحة index.php‏ وسيكون الكود كما في الصورة: 

: index.php صفحة‎ 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.O0rg/TR/xhtmll/DTD/xhtmli-transitional.dtd"» 
<html xmlins-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

Xtitle»SLa24,1xa ii لتكتولوجيا‎ 315453! | Technology Pioneers</title> 

«link href-"css/style.css" rel="stylesheet" type="text/css" /» 

</head> 

<body> 


</body> 
</html> 


: style.css صفحة‎ 


Gcharset "utf-8"; 


bodyt 
background-color: #FCO; 
background-image: 
url(../images/bg.jpg):! 


قمنا بإدراج خلفية جاهزة bg.jpg e«t‏ سيكون شكل الصفحة كما في الصورة : 


MOBILE: 00967 714490030 TO E 
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- > © |D localhost/project/ — aR FF FOZ & غات‎ = 


نقوم بتقسيم الصفحة الرئيسية إلى عدة ديفات أو حسب الحاجة ونقوم بتحديد اطرافها وعمل لون مؤقت والديفات كالتالي : 
الديف العام والذي سيحوي جميع الديفات الأخرى وسنسميه main‏ والكلاس الخاص به في ملف style.css‏ بنفس الاسم. 
ديف رأس الموقع وسيحوي الشعار واسمه header‏ والكلاس الخاص به بنفس الاسم ايضا. 

ديف القائمة وسيكون menu‏ والكلاس ايضا بنفس الاسم. 

ديف الخاص بالسلايد شو وسنسميه slide‏ أو حسب التطبيق الذي سنضيفه من سلايدشو جاهز. 

ديف خاص بمحتوى الموقع .content‏ 

ديف بالجزء السفلي للموقع bottom‏ 

ديف خاص بالفوتير أو تذييل الموقع footer‏ وسيكون خارج الديف العام. 


بعد القيام بهذا الخطوات سيكون شكل الكود في index.php‏ كما في الصورة: 


MOBILE: 00967 714490030 UN m 
MOBILE 2: 00967 772755202 Email: info@techpio.net ah nies 


MES 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmli-transitional.dtd"» 
<html xmins-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

Technology Pioneers</title>‏ | الرواد لتكتولوجِيا المعلومات<61516> 

«link href-"css/style.css" rel-"stylesheet" type-"text/css" /» 

</head> 

<body> 

<!-- الديف العام‎ Llao ia--» 


<div class-"main"» 


مر QN‏ ظر ين 


ه 


ia--»‏ داية ترويسة الهوقع--!> 


«div class-"header"»g3,4 | wi </div> 


Lia--»‏ يداية القائمة--!> 
<div class-"menu"»245L1j| Lia </div>‏ 


«!--4aSLs3J! قهاية‎ Lia--» 


jg --< 
«div class-"slide"»,2 سلايد‎ Liac/div» 
«!--End Slide show--» 


»—— يداية فحتوى الموقع !» 
>div/<محتوۈوJى‏ | «div class-"content"»&3,a‏ 
<-- تهاية محتوى الموقع --!> 


<--يداية الفوتير--!» 
>div/<تiنییJ‏ الموقع<"2ع20066"-13255ه «div‏ 
ج«حدنيهاية. القوقيوو --!«€ 


«/div» 

<--نهاية الديف العام--!> 
</body>‏ 

</html> 


وسيكون الكود في ملف style.css‏ كما في الصورة : 


.main( 
height:auto; 
width:960px; 
margin:0 auto;} 


-header( 
border:£FFF solid 1px; 
height:auto; 
width:960px; 
margin:0 auto; 

} 

.menu( 
border:solid £fff 1px; 
height:auto; 
width:960px; 
margin:0 auto;} 


.Slide{ 
border:£FFF solid 1px; 
height:auto; 
width:960px; 
margin:0 auto;} 


.content( 
border:£FFF solid 1px; 
height:auto; 
width:960px; 
margin:O0 auto;! 


.footer( 
border:£FFF solid 1px; 
height:auto; 
width:960px; 
margin:O0 auto; 
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وستكومن النتيجة كالتالي : 


E © | D localhost/project Dae نك‎ FOG 7 € نف‎ = 
الموقع‎ od y 

هنآ القائمة 

BS pU 

محتوى الموقع 


EPI 


نقوم بالعمل على ترويسة الموقع header‏ ونبدأ بتصميم شعار الموقع وسيكون المقاس (الطول ١١١‏ بكسل والعرض ۲۷١‏ بكسل) أو حسب الرغبة 
ونضعها في مجلد الصور. سنقوم بعمل كلاس للصورة أو الشعار imglogo‏ لكي نستطيع التحكم بالشعار. وسيكون الكود في index.php‏ كالتالي: 


«div class-"header"» 
mg src-"images/logo.png" 
</div> 


lass="imglogo" 


وتم اضافة خاصية (direction)‏ وتم تحديد القيمة rt]‏ للديف header‏ كي تكون الصورة او الشعار في الجهة اليمنى. وسيكون الكود في style.css‏ 


كما في الصورة: 


direction:rtl 
border:£FFF solid 1px 
height:auto 
width:960px 

margin:O auto 
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وسيكون شكل الموقع كما في الصورة : 


€ 2 CID localhost/project/ 


= ها ف 5 2 © خا # KF‏ 


ننتقل الان للقائمة وكتابة العناصر فيها وعمل كلاس خاص بها وبعناصر القائمة بكاملها وسيكون الكود في index.php‏ كما في الصورة : 


Lia--»‏ يداية القائهة--!> 
<div class-"menu"»‏ 
<ul>‏ 
<li><a href-"index.php"»i.a. 5, «/a»«/li»‏ 
<li><a href="#"> Li 5Lo1 5«/a»«/li»‏ 
<li><a href="#">li ila sÍ ja</a></1i>‏ 


pp 
ها‎ © - 


[2] 


3 <li><a href-"£"»5 & 5 gy »«/a»«/li» 

4 <li><a href="$">li— اتصل‎ >/3<>/11< 
5 «/ul» 

HE </div> 


NNNNNNNNBPB 


ل 


طح هتا تهاية القائمة--!> 


.menu ul(list-style:none; 
margin: 0; 
margin-top: 10px; 
margin-bottom: 10px; 
float:right; 
margin-right:20px; 


o c 


OÓ 


3p 


) 

.menu ul lit 

display:inline; 

height:33px; 

padding:Opx 3px Opx 3px; 

color:£FOC; 

text-shadow: 1px 1px 3px 1px #00000; 
width:70px; 


م ماه 


مر يم 
ب 


.menu ul li at 
color:#fff; 
font-weight :bold; 
text-decoration: none; 
text-shadow: 1px 1px 0 #595454; 
text-decoration: none; 
padding: Opx 3px Opx 3px; 
text-shadow: 1px 1px #333; 
2025-5126 : 
) 


[2] 


ضر شر سن كن (n‏ 


n 
) » i 4 QN هم‎ 


n à من صن‎ 


.menu ul li a:hover,nav ul li a:activet 
padding:Opx 3px Opx 3px; 
height:33px; 
border-radius:Opx 8px Opx 8px; 
color: #FFF; 
text-shadow: 1px 1px #C90; 

} 
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وسيكون الكود في ملف style.css-‏ كما في الصورة : 
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وستكون شكل القائمة كما في الصورة التالية : 


€ > Q ÛD localhost/project/ QIR # ouv 5 Z & ww z 
78 
fi لاد ت‎ EL) 
F 
[Um MEAL 
من اعمالتا من نحن اتصل ينا‎ A ار ئيسية‎ 
هنا سلاد شو‎ 
محتوى الموقع‎ 
تذييل الموقع‎ 


سنقوم بإضافة كودين Y‏ اكواد جديدة للكلاس الخاص بالقائمة وهما كما في الصورة : 


border-top:dotted 4878787 1px 
border-bottom:dotted £B7B7B7 1px 
margin-top:7px 

height:40px 

width: 960px 


كما نلاحظ تم حذف border-l‏ السابق وتم اضافة border-‏ لأعلى وأسفل كما في السطرين £ Yog Y‏ وجذف ايضا الكود السابق maring‏ واضافة 
margin‏ من أعلى كما نلاحظ الكود أعلاه » وبعد الانتهاء من الترويسة وما فيها من الشعار وايضا القائمة نقوم بحذف البوردر border‏ الخاص 
header‏ من ملف css‏ والموجود في سطر ١7‏ وسيكون شكل الموقع كما في الصورة : 


7 4 ت‎ TRA 


Um 1445454^* 


Lu Lans تح‎ E Û Po kar PRIE. الرئيسدةه‎ 
rete - FFT iru AA c - zl 


هنا سالايد شو 
محتوى الموقع 


ER 


نقوم بتركيب سلايد شو وهو موجود لدي مسبقا وهو كما في الصورة: 


حبا بكم في "EUM‏ الالكترونية 
LO ad MIU 47 0 LA‏ 
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۷۸ 


من خلال الصوراة اعلا سقو Pall an)‏ شمن انفرع athl‏ با cla, a sila‏ لديف lide gai‏ ولك اتقؤم Js‏ التطبيق Ads‏ لحرن 
على نقل الملفات الخاصة به وملفاته كما في الصورة : 


n library > Share with v Burn New folder B: - EH e 
Name E Date modified Type Size 
Û datal Y-MJ/.í/YYa-MYY File folder 
لال‎ enginel 7١15/١5/7 ص‎ 1١:55 File folder 
e iframe index Y2ME/*£/YV ص‎ «YA Chrome HTML Do... 1KB 
© inde Y-15/-E/YV ص‎ «0| Chrome HTML Do... 2 KB 


سنقوم بنقل جميع الملفات أعلاه إلى مجلد project‏ باستثناء index‏ فقط سنقوم بنسخ الكود الذي نريده من داخله وسيكون شكل المجلد بعد النقل كما 


77 » Computer » LocalDisk(C:) ١ wamp » www » project » v | ¥; ||| Search project م‎ 

Organize v Include in library > Share with v Burn New folder How e 
x Favontes Name 1 Date modified Type Size 

RE Desktop "| admin Y-MJ-E/W p ١:5 File folder 

ll Downloads i css Y-1£/-£/YV p Yo File folder 

E] Recent Places J datat Y-1E/-E/TV م‎ ٠0:51 File folder 

Û enginel Y-MJ/-E/YV a «O:E1 File folder 
Al Libraries لال‎ images Y-15/-E/TV a +£:\+ File folder 
<| Document iframe_index ۰۱1/۰2/۲۷ ص‎ ۸ rome H o... 
Ej D its eit d ۲۰۱٤/۰2/۲۷ ص‎ Ch ITML D 1KB 
d Music "I index Ye\l/-E/TV a «EEN PHP Script 2 KB 


سنقوم بفتح ملف index. htm]‏ لنسخ الكود منه إلى الصفحة index.php‏ كما في الصورة : 


<body style-"background-col 
«d id: ic 


iBfffff"» 


dia Files 
É ases 
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DA 


تم نسخ الكود أعلاه وايضا السكربتات المرتبطة واللينكات للملفات الخارجية وهي المهمة. وسيتم النسخ إلى داخل ال slide‏ كما في الصورة : 


«div class="slide"> 
«div id-"wowslider-containeri1"» 
«div class-"ws images"»«ul» 
>11 <> 1200 src-"datal/images/chrysanthemum.jpg" alt-"1 "عنوان‎ title-"i.5,,1$ Jy! يكم قي دورة المواقع‎ Lep" id-"wowsl 0"/»«/li» 
«li»x«img src-"datal/images/desert.jpg" alt-"2 glis" title-"2 "عتوان‎ id-"wowsl 1"/»«/li» 
<li><img src-"datal/images/hydrangeas.jpg" alt-"3 "عنوان‎ title-"3 "عنوان‎ id-"wowsl 2"/»«/li» 
X«li»x«img src-"datal/images/jellyfish.jpg" alt-"4 j!,ic" title-"4 j!,ic" id-"wowsl 3"/»«/li» 
«lix«img src-"datal/images/tulips.jpg" alt-"5 "عتوان‎ title-"5 j!,is" id-"wowsl 4"/»«/li» 
«/ul»«/div» 
«div class-"ws bullets"»«div» 
«a href-"£" title="; ùs j!,ic"»«img src-"datal/tooltips/chrysanthemum.jpg"/»1«/a» 
«a href-"£" title-",,i1, j!,ic"»«img src-"datal/tooltips/desert.jpg"/»2«/a» 


E «a href-"£" title="; ùs j!4,is"»«img src-"datal/tooltips/hydrangeas.jpg"/»3«/a» 
EME <a href-"£" title-",. ie عنتوان‎ "<> 1510 src-"datal/tooltips/jellyfish.jpg"/»4«/a» 
LEE <a href-"£" title-",. i42 5!,4is"»«img src-"datai/tooltips/tulips.jpg"/»5«/a» 

</div></div>‏ كلق 

50 <div class-"ws shadow"»«/div» 

51 «/div» 

PEE </div> 

53 «!--End Slide show--» 


وايضا قمنا بنسخ اللينكات والسكربتات الخاصة بالسلايشو في المكان الصحيح ما بين كود head!‏ قمنا بنسخ الرابط لملف الجي كويري فقط 
والسكربتات الأخرى في bodyd)‏ كما في الصورتين: 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

Technology Pioneers</title>‏ | الرواد لتكتونلوجيا المعلومات<251516> 

«link href-"css/style.css" rel-"stylesheet" type-"text/css" /» 

«link rel="stylesheet" type="text/css" href-"enginel/style.css" /» 
«script type-"text/javascript" src-"enginel/jquery.js"»«/script» 
</head> 


<--تهاية الديف العام--!> 

«script type-"text/javascript" src-"enginel/wowslider.js"»«/script» 
«script type-"text/javascript" src-"enginel/script.js"»«/script» 

</body> 

</html> 
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وسيكون شكل التطبيق بعد نقله كما في الصورة: 


€ X | [5 localhost/project/index.php* 3 ل 2ه‎ « © 7 ow z 


نقوم بإزالة الخطوط البيضاء من الديف slide‏ بحذف border-‏ من ملف ess‏ وسيكون شكل الموقع كما في الصورة : 


e Q | D localhost/project/index.php# + نف 1 2 خا له هه‎ z 


سنقوم بعمل إضافات جديدة على الموقع وهي عمل خلفية بيضاء شفافة للديف main‏ والخلفية نقوم بعملها في الفوتوشوب أو من أي مكان وحسب 
الرغبة وعمل ظل للديف العام . أما الصورة فهي كما نشاهد : 


lok: E u^ $ 8 


www.techpio.net 


كما في الصورة أعلاه نقوم بحفظ الصورة ونسميها bg2. png‏ ونقوم بإضافة الكود في style.css‏ للديف main‏ الخاص بالخلفية وسيكون الكود كما 
في الصورة : 


.main{ 
height:auto; 
width:960px; 
margin:0 auto; 
background-image:url(../images/bg2.png): 
margin-top: -7px; } 


تم اضافة الكود في سطر ١‏ وسيكون شكل الموقع كما في الصورة: 


مرحبا بكم في دورة المواقع الالكترونية 


نقوم بعمل ضل للديف » هناك بعض المواقع المساعدة تصميم وان شاء الاكواد بشكل يدي كما في الموقع : 
(http://www.cssmatic.com/box-shadow)‏ 


وهو كما في الصورة ادناه من خلال الازرار في اليسار نتحكم بالظل للديف على اليمين وينتج لك الكود الذي يقوم بذلك وننسخ الكود الى داخل الديف 
(الكلاس الخاص 4(: 
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= چا ف & 2 © FF‏ + د 


BOX SHADOW k| wr Tweet) (47 8+1 90 
Horizontal Length px 
Vertical Length px 
Copy Text 

Blur Radius px 

-webkit-box-shadow: -3px 7px 28px 1px 

rgba(0,0,0,0.75); 

-moz-box-shadow: -3px 7px 28px 1px rgba(0,0,0,0.75) 
Spread Radius px box-shadow: -3px 7px 28px 1px rgba(0,0,0,0.75); 


Shadow Color [ | 


Box Color 


Color 


Outline Inset 


وسيكو الكود كما في الصورة : 


height:auto 

width:960px 

margin:0 auto 

background-image:url(../images/bg2.png) 

margin-top:-7px 

-webkit-box-shadow: -3px 7px 28px 1px rgba(0,0,0,0.75) 
-moz-box-shadow: -3px 7px 28px 1px rgba(0,0,0,0.75) 
box-shadow: -3px 7px 28px 1px rgba(0,0,0,0.75) 


وسيكون شكل الموقع كما في الصورة: 


€ eín localhost/project/ wd # تف € 72 © خا‎ E 
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1۸۳ 


Ji‏ للديف content‏ والخاص بالمحتوى c‏ من خلال القوالب التي نستفيد منها في اجزاء المواقع لدينا قالب مميز سنستفيد من بعض أجزاءه وهو كما 
في الصورة : 


WHAT WE DO 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 


consequat 
LOREM IPSUM IS SIMPLY LOREM IPSUM IS SIMPLY LOREM IPSUM IS SIMPLY LOREM IPSUM IS SIMPLY LOREM IPSUM IS SIMPLY 
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do consectetur adipisicing elit, sed do consectetur adipisicing elit, sed do consectetur adipisicing elit, sed do consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut eiusmod tempor incididunt ut eiusmod tempor incididunt ut eiusmod tempor incididunt ut eiusmod tempor incididunt ut 
labore et dolore magna aliqua labore et dolore magna aliqua labore et dolore magna aliqua labore et dolore magna aliqua labore et dolore magna aliqua 


سنأخذ الجزء الأول (WHAT WE DO)‏ : والطريقة هي أن نقوم بنقل الديف كامل لهذه الجزئية وهي كما في الصورة: 


<div class-"main"» 
<div class="wrap"> 
"content-top"> 


rem ipsum dolor sit amet, consectetuer adip 
Ut wisi enim ad mini: iam, quis nostru 


«div class-"section group"» 


من خلاص الصفحة الخاصة بالقالب نقوم بنسخ المضلل عليه ونضعه في الديف content‏ للصفحة index.php‏ الخاصة بعملنا كما في الصورة: 


- 


>!-- يداية محتوى الموقع‎ --< 
<div class-"content"» 
«div class-"top-box"» 


<22/>ماتقوم يه رواد التكتولوجيا<22> 


© ماه 
]5[ 


E 


9 
0 


<hr> 

<p> 

موقع إلكتروتي متخصص قي تكتولوجيا المعلومات ويقدم خدمة تصميم واستضاقة المواقع الالكتروتية والتسويق الالكتروتي 
مواقع : رسمية - إخبارية - تجارية - تعليعية -قواعد بيياتات 
إعلاتات ممولة : قيس يوك - جوجل - تشرات الكتروتية رسمية 

</p> 

</div> 

</div> 
€!-- نهاية محتوى الموقع‎ --< 


لاحظ الكلاس الموجود في سطر 14 الخاص بالنصوص إما أن نقوم بتتبع وجود الكلاس في ملفات الووح الخاصة بالقالب ونقوم بنقله لملف 
style.css-ll‏ الخاص بنا أو نقوم بنقل الملف إلى المجلد ess‏ ونعدل مسار الرابط الخاص به. هنا نحن قمنا بحذف جميع الاكواد الخاص به ماعد الكلاس 
الذي نحتاجه ونقلناه مع المجلد كما في الصورة : 
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/*—-—content--* 
.top-box h2{ 
text-align: center; 
color: FEE; 
font-size: 3em; 
font-family: 'bebas neueregular'; 
margin-bottom: 20px; 


1 
3 
4 
5 
6 


border-bottom: 1px solid £CCC; 
border-top: none; 
margin: 0; 
width: 500px; 
display: inline-block; 
margin-top: -14px; 
margin-bottom: 14px; 
margin-right: auto; 
margin-left: auto; 

) 

.top-box 
text-align: center; 
margin-bottom: 2%; 

} 

.top-box pí 
color: FEEL} 
font-size: 0.8125em; 
line-height: 1.5em; 
width: 65$; 
margin: 0 auto; 


والطريقة الأسهل هي نقل الكود السابق إلى style.css-l‏ . وسيكون شكل الموقع بعد تحويل النص إلى العربي كما في الصورة : 


o2 | ES 


€ > CG  [localhost/project/indexphp LIE GEN © 7 5 نت‎ = 


موقع إلكتروتي متخصص Us th‏ المعاومات ويم حدمة تصمي 
تجارية ‏ تطيمية -قواعد بيانات إعلانات ب 
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3^6 


نقوم بإضافة أخرى أيضا وهي للأقسام أو الخدمات الثلاث التي تقدمها رواد التكنولوجيا وسنستفيد أيضا من أحد القوالب وهي الجزء الموجود في 
الصورة : 


UT HENDRERIT LIPSUM PROIN VEHICULA JUSTO 


سنقوم بنسخ الكود الخاص بالتطبيق أعلاه مع توابعه من ملفات ess‏ والكود الخاص به كما في الصورة : 


سنقوم بنسخ الأكواد أعلاه وننقلها للصفحة index.php‏ الخاصة بنا تحت الديف الخاص ب(ما تقوم به رواد التكنولوجيا) كما في الصورة : 


MOBILE: 00967 714490030 WW techpionet 
MOBILE 2: 00967 772755202 Email: infoetechpio.net j puo 


3^1 


مواقع : رسمية - إخيارية - تجارية - تعليمية -قواعد يياتات 
إعلاتات ممولة : قيص يوك - جوجل - تشرات الكتروتية رسمية 
«/p»‏ 
«/div»‏ 
>-- لجزء الثاني من المحتوى - 


<div class="grid_s"> 
<h2>Lorem ipsum dolor sit amet consectetur adiing</h2> 
<div class="grid"> 
<div class="gallery"> 
«a href-"web/images/grids-img4.jpg"»«img src-"web/images/grids-img4.jpg" title="image-name"></a> 
«/div» 
<h3>the rhoncus neque«/h3» 
«div class-"grid p"» 
<p>Lorem ipsum dolor sit amet consectetur adiing elit. In volutpat luctus eros ac placerat. Quisque erat metus facilisis 
non feu,aliquam hendrerit quam. Donec ut lectus vel dolor adipiscing tincnt.«/p» 
<a class="button bg2 grid btn" href-"details.html"»read more</a> 
«/div» 
«/div» 
«div class-"grid"» 
<div class-"gallery"» 
«a href-"web/images/grids-img5.jpg"»«img src-"web/images/grids-img5.jpg" title-"image-name"»«/a» 
«/div» 
Xh3» ut hendrerit lipsumc/h3» 
«div class-"grid p"» 
<p>Lorem ipsum dolor sit amet consectetur adiing elit. In volutpat luctus eros ac placerat. Quisque erat metus facilisis 
non feu,aliquam hendrerit quam. Donec ut lectus vel dolor adipiscing tincnt.«/p» 
<a class="button bgl grid btn" href-"details.html"»read more«/a» 
«/div» 
«/div» 
<div class-"grid last-grid"» 
«div class-"gallery"» 
«a href-"web/images/grids-img5.jpg"»«img src-"web/images/grids-img6.jpg" title-"image-name"»«/a» 
«/div» 
«h3»Proin vehicula justo«/h3» 


نقوم الان بربط gd gall‏ الخاص بنا بملفات التنسيق سواء esl‏ والجي كويري ونقل الملفات او المجلدات المتطلبة والمجلد المرتبط بهذا اسمه Web‏ 
وتم اضافته للمجلد الخاص التطبيق وفيه جميع الملفات وسنقوم بالتخلص من جميع الملفات ماعدا المرتبطة بالجزء الذي نريده وسنقوم بنسخ الروابط 
كما في الصورة التالية : 


>! < 
0 5 E «link href-"web/css/srtyle.css" rel="stylesheet" type="text/css" media="all" /» 
1 X/head» 

<body> 


نلاحظ في سطر عشرة واين مساء الملف المطلوب ونحن مخيرين إما ان نقوم بنسخ الكلاسات التي تتحكم بالجزء الذي نسخناه ونضعه في ملف 
6.55 او ننقل المجلد كاملا كما في الصورة : 


Qus » Computer » Local Disk (C:) » wamp » www » project » web < 


Organize v Include in library v Share with v Burn New folder 


y 


7 ame ate modifie: pe Ize 
جلو‎ Favorites N D dified Ty Si 
BE Desktop li css 7١15/١2/77 ص‎ 1١:57 File folder 
"n Downloads B images Y VE/«E/YA p \Y: eV File folder 


T Recent Places 
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وسيكون شكل الموقع كما في الصورة: 


- © [)localhost/project/indexphp FET © 7 4 نت‎ z 


Lorem Ipsum Dolor Sit Amet Consectetur Adiing 


The Rhoncus Neque Ut Hendrerit Proin Vehicula 
Lipsum Justo | 


نقوم بتعريب اللغة وتعديل ما يلزم من مقاسات الخطوط في العناوين والتفاصيل في ملف style.cssdi‏ ضمن مجلد التطبيق web‏ وسيكون شكل الموقع 
بعد التعديل : 


71 | تصميم وإستضافة مواقع إلكترونية قسم تصميم الجرافكس صيانة حاسوب وتركيب شبكات 


www.techpio.net 


۸۸ 


نقوم ايضا بتعديل الخلفية لكل صندوق والرابط السفلي من حيث الخط والنص وازالة الخط من تحت رابط (تفاصيل اكثر) وسيكون شكل الموقع كما في 
الصورة: 


ونقوم ايضا بتعديل مقاس الطول للديف content‏ كما في الصورة : 


.content { 
height: 750px: 
width: 960px; 
margin:0 auto; } 


سنقوم الان بإضافة كود جديد للخلفية العامة البرتقالية وهي ان نحدد هذه الخلفية ثابته على ان يتحرك الديف العام main‏ والكود هو كما في الصورة 
في سطر ^ في ملف style.css‏ الاصل: 


bodyt 
background-color: #FCO; 
background-image: 
url(../images/bg.jpg): 
background-attachment:fixed;?! 


4 
5 


5 - من 


ننتقل إلى footer-ll‏ ونقوم بداية بتصميم خلفية للجزء السفلي (footrt)‏ ونحدد مؤقتا مقاسات الطول ونضع الخلفية ونلغي border-!‏ كما نضيف 
ايضا تحديد لزوايا الفوتير السفلية من حادة الى ملتوية كما في سطر ۸۸ ونفس الكود للديف main‏ في الصورة : 


-footer( 
background-image:url(../images/footer.png): 
height:auto; 
height:400px; 
width:960px; 
margin:O0 auto; 
border-radius:Opx Opx Spx Spx; 

) 
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وسيكون شكل الموقع كما في الصورة: 


تصميم واستضافة مواقع الكترونية تصاميم رواد التكنولوجيا قسم تصميم من ضمن خدمات رواد التكنولوجيا صيانة 
وتركيب انظمة ادارة محتوك تصميم الجرافكس قسم تصميم الحرافكس الحاسوب وتركيب الشيكات للمؤسسات 
واستضافة مواقع الكترونية وتركيب انظمة قسم تصميم الجرافكس قسم تصميم والمراكز بمختلف توجهاتها من ضمن 
ادارة محتوى تصميم واستضافة مواقع العحرافكس قسم تصميم الحرافكس خدمات رواد التكنولوجيا 

قسم تصميم الجرافكس قسم تصميم 


ننشئ ثلاثة ديفات داخل الفوتير لكلا من (آخر الأخبار - زوار الموقع - روابط التواصل ( وقبل البدء بإنشائها نحدد ثلاثة كلاسات ايضا بنفس الاسماء 
للديفات التي سنقوم بعملها وهي (كلاس news‏ للأخبار — visitors‏ لزوار الموقع — social‏ للروابط ( وستكون كما في الكود التالي : 
.newsí)‏ 


.visitorsí)! 


.linksí) 


وستكون في صفحة index.php‏ كما في الصورة : 


«div class-"footer"» 
«div class="news">} Las}! آخر‎ Liac/div» 
«div class-"links"»e! iJ! روايط‎ </div> 


«div class-"visitors"5ag3,4 | jl3j«/div» 


www.techpio.net 


نقوم بعمل خصائص الكلاس news‏ والخاص بالديف news‏ وهي كما في الصورة : 


. 26175 4 
width: 310px; 
border:solid #999 1px; 
margin: 3px 5px 3px 5px; 
border-radius:3px 3px 3px 3px: 
color: #E6E6E6; 
01265102: 
padding:2px 4px 2px 4px; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:12px; 
float:right;! 


O wv 


N he 


ن) کش € 65١‏ - 


œ 
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1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
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وايضا خصائص الاتجاه او الاماكن للديفات حتى تكون كلها الثلاثة بجانب بعض كما في كود الكلاسات : 


.news{ 
width: 310px; 
border:solid #999 1px; 
margin: 3px 5px 3px 5px; 
border-radius:3px 3px 3px 3px; 
color: #E6E6E6; 
direction:rt1l; 
padding:2px 4px 2px 4px; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:12px; 
float:right;! 


(nu زم یں‎ IP O ما‎ 


mM‏ ل 


NNNN N N N N RY RY j" 


O 0ا‎ © 


.visitors{ 
width: 310px; 
float:left;) 


wW w w w w 


. 11215 4 
width:310px; 
float:right;! 


w 


لسغ در فر قم DIDI‏ قم د در p»DP‏ قم قم قم P P HP‏ !| 


Ww w 
هم يم ن هک ا ي ل‎ 


سيكون شكل الفوتير كما في الصورة: 


ODRO OJI‏ تصميم MILAI‏ موادع _ اتجراتحس تسم تصميم الجراكحس 
قسم تصميم الحرافكس قسم تصميم 


القيام بإنشاء روابط التواصل وعداد الزوار وقائمة للروابط الخاصة بالأخبار 


ننشأ أولا القائمة الخاصة بالاخبار u]‏ وعمل تنسيق خاص بها في ملف style.css‏ كما في الكود التالي : 


<div class-"news"» 

«ul» 

<2<>/11/>رواد التكتولوجيا تقتتح دورة تصميم واسضاقة المواقع الالكتروتية Xli»«a href="#">‏ 
<23<>/11/>رواد التكتونوحِيا يتقدم يعرض جديد لعملائه الكرام<"#"-2عطط Xli»«a‏ 

<2<>/11/>دورات تدرييية لمصممي المواقع ومدراء الاعلام الالكتروتي فقي المؤسسات<"+#"-262ط <li><a‏ 
<3<>/11/> عرض خاص يمتاسبة شهر رمضان العبارك<"4"-2ع22 Xli»«a‏ 

<3<>/11/>رواد التكتولوجيا pige‏ الامة الاسلامية والعريية يمتاسية شهر رمضان | href-"£"»3,L.4‏ 11<>2> 
</ul>‏ 

</div> 


فر قم قم قم كو قم قم در قل 
ذم N N‏ دم يم يم يم يم نى 
QN‏ شم ان 66 ل- O (0 C‏ 
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وسيكون الكود في style.css‏ كما في الصورة: 


صا 


.news{ 
width: 310px; 
border:solid #999 1px; 
margin: 3px 5px 3px 5px; 
border-radius:3px 3px 3px 3px; 
color: #E6E6E6; 
direction:rtl; 
padding:2px 4px 2px 4px; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:12px; 
float:right;! 


فم فر مهم قم هم HP‏ فم 
OD‏ کر I9‏ یں 5( XO)‏ ى -J‏ 


m 


O م‎ © 


.news ul li at 
text-decoration:none; 
color:£CCC; 

2025-5326 : 

13126-63901225: } 

.news ul li a:hover( 
text-decoration:underline; 
color:£FFF;! 
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وسيكون شكل الفوتير كما في الصورة: 


ثانيا : نقوم بعمل عناوين للديفات الثلاثة وعمل كلاس خاص بهذه العناوين وسيكون العنوان عبارة عن ديف صغير داخل كل ديف من الثلاثة كما في 
الكود (سطر (Y Y‏ التالي : 


N 


<div class="news"> 

«div class-"headline"»,L,.5V| آخر‎ </div> 

<ul> 

<3<>/11/>رواد اتتكتونوجيا تقتتح دورة تصميم واسضاقة المواقع الالكتروتية «li»x«a href="#">‏ 
<3<>/11/>رواد التكتولوجيا يتقدم يعرصض جديد لعملائة الكرام>"#"=href <li><a‏ 

<3<>/11/>دورات تدريبية لمصممي المواقع ومدراء الاعلام الالكتروتي قي href-"£"»5Las$a ii‏ 11<>2> 
<3<>/11/> عرض خاص يمتناسية شهر رمضان المبارك>"#"=href <li><a‏ 

<3<>/11/>رواد التكتولوجيا يهتئ الامة الاسلامية والعريية يمتاسية شهر رمضان | <li><a href-"£"»3,L.4‏ 
</ul>‏ 


</div> [3d 


ذم دم يم يم يم در 


(QD‏ شر ل 6 ل 


دم دم Q‏ 
م 0ا © دنر 


U) 


وسيكون الكلاس الخاص به كما في الصورة: 


.headlinet 
text-decoration:underline; 
font-size:13px; 
color:£FCO0;! 
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نقوم ايضا بوضع الخصائص لكل كلاس في الفوتير وسيكون شكل كلاسات news - links — visitors)‏ ( كما في الصورة: 


.newst 
width: 300px; 
border:solid #999 1px; 
margin:3px 5px 3px 5px; 
border-radius:3px 3px 3px 3px; 
color: £E6E6E6; 
direction:rtl:; 
padding:2px 4px 2px 4px; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:12px; 
float:right;) 


Oo 


NNNNN N N هرم نم‎ 
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N N 


[^] 


.news ul li at 
text-decoration:none; 
color:$CCC: 
font-size:13px; 
line-height :24px; } 

.news ul li a:hovert 
text-decoration: underline; 
color: #FCO;} 


w w w 
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w w w w 


.visitors{ 
width: 300px; 
float:left; 
direction:rtl; 
border:solid #999 1px; 
border-radius: 3px 3px 3px 3px; 
padding:2px 4px 2px 4px; 
margin:3px 1px 5px 3px; 
font-family:Tahoma, Geneva, sans-serif; 


links والكلاس‎ 


.linkst 
width: 311px; 
direction:rtl; 
color:£CCC; 
font-size:13px; 
line-height :24px; 
border:solid #999 1px; 
border-radius:3px 3px 3px 3px; 
margin:3px 1px 5px 2px; 
padding:2px 4px 2px 4px; 
float:right; 
font-family: Tahoma, Geneva, sans-serif; 


-headline( 
text-decoration:underline; 
font-size:13px; 
color:£FCO;) 


وسيكون شكل الفوتير بشكل عام كما في الصورة: 
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كما نلاحظ تم اضافة روابط (تواصل معنا) وعمل صور لصفحات التواصل الاجتماعي في مجلد (icons)‏ وهي كما في الكود index.php‏ : 


<div class-"links"» 

«div class-"headline"»;.s معنا‎ Lo! 7:X/div» 

رواد التكتونوجيا شارع حده 

<br /> 

تلقون : 00967714490030 

BE /» 

تلقاكص : 00967714490030 

<br /> 

en yusufüyahoo.com‏ : اليريد الإلكتروتي 

<br جر‎ 

جوال : 714490030 

«br /» 

أو عبرصقحاتتا الاجتماعية 

<br /» 

«a href-"https://www.facebook.com/TechPio"»«img src-"icons/f.jpg" width-"32" /»«/a» 
«a href-"http://www.techpio.net"»«img src-"icons/t.jpg" width-"32"/»«/a» 
«a href-"http://www.techpio.net"»«img src-"icons/y.jpg" width-"32"/»«/a» 
«a href-"http://www.techpio.net"»«img src-"icons/l.jpg" width-"32"/»«/a» 
<br Pe | 

</div> 


نقوم الان بعمل كود او تركيب عداد زوار الموقع ويمكننا اضافته من موقع www.flagcounter.com)‏ ) كما في الصورة : 


CMM n‏ :بيبل د 


WELCOME TO FLAG COUNTER! TESTIMONIAL 

Add our free counter to any webpage and collect flags from all over the world. Every time someone 7. check my homepage every morning. When I 
from a new country visits your site, a flag will be added to your counter. Not only will this make your see a new flag show up, it makes me proud! 
site far more interesting, but clicking on your Flag Counter will reveal amazing information and charts! Thanks for the great free service." 


- Bob H. - West Virginia 


INSTANTLY CREATE YOUR FREE COUNTER 


© Customize your counter here. When you're finished, click the orange button. | Reset Sj 


Show on your site: @ Top Countries © Flag Map More choices» 
Maximum Flags to Show | 12 v Background Color FFFFFF $ Show Flag Labels 


Columns of Flags [2 3 Text Color s CINE Show Pageview Count @ 


Show Number of Flags B 
Label on Top of Counter [Visitors | Border Color # 


<< GET YOUR FLAG COUNTER 


© Flag Counter preview using your selections. (But our visitors) 


Visitors 

357,946 سس 761,182 = 

515 494 ,741 lêl 333,174 

EJ 445,766 m 312,514 FLAG 
E 407,650 ZZ 275,853 

imu 399,755 [ill 269,063 

= 386,376 l| 8 250,401 


7 FLAG [17705073 


نختار العدد للدول ثم الاعمدة واظهار كلمة زوار ام لا ثم خلفية اللون ولون الخط والبوردير ثم الزر البرتقالي الذي يعطيك الكود. وسنقوم بعمل العداد 
الخاص بنا ثم نأخذ الكود ونقوم بتركيبه داخل ديف visitors‏ كما في الصورة التالية : 
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INSTANTLY CREATE YOUR FREE COUNTEI 


© Customize your counter here. W you're he ick t ran )uttor 


Show on your site: ® Top Countries Flag Map 

Maximum Flags to Show | 0 r Background Color st Show Flag Labels W) 
Columns of Flags [2 x Text Color # 000008 P Show Pageview Count (V 

Label on Top of Counter [none : Border Color & Show Number of Flags ij 


X» GET YOUR FLAG COUNTER 


© Flag Counter preview using your selections. (But © Sitors) 


V?z FLAG counter 


ثم التركيب كما في الصورة : 


KAL. :Icounter] 


نأتي الآن إلى ديف أخير للحقوق ورابط لمن قام بإنشاء الموقع ثم ننتقل للمرحلة الثانية من بناء الموقع وسيكون اسم الديف وكلاسه copyrights‏ كما 
في الصورة أدنا : 


في صفحة index.php‏ : 


| 
li 
| 
| 
f 


<br /> 

<div class="copyrights"> 

جميع الحقوق متاحة ومقتوحة تلجميع 

«br /» 

<3/>رواد | 34143 prd : «a href-"http://www.techpio.net"»L.24‏ من 

<br /» 

[^7 

«script type="text/ javascript" src-"enginel/wowslider.js"»«/script» 
<script type-"text/javascript" src-"enginel/script.js"»«/script» 

</body> 

</html> 
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كما نلاحظ تم عمل الديف خارج الديف main‏ او الديف العام وسيكون الكلاس الخاص به كما في الصورة: 


text-align:center 

font-family:Tahoma, Geneva, sans-serif 
font-size:12px 

margin:O0 auto 

width:959px 

color:#fff 


وسيكون شكل الحقوق كما في الصورة : 


نقوم باستبدال الصور في السلايدشو بصور أخرى كما في الصورة: 


پد س E‏ « 4 
COT‏ 7 | 
لز يسنن M^ ———À‏ ا ر مسن 
Y Y 42+‏ * 


مرحبا بكم في دورة المواقع الالكترونية 


اكاك سكي 


نقوم بتعديل الطول للديف footer‏ ونضع القيمة « « Y‏ بكسل في ملف style.css-ll‏ كما في الصورة : 


background-image:url(../images/footer.png) 
height:auto 

height:300px 

width:960px 

margin:O0 auto 

border-radius:Opx Opx 5px 5px 
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yt 


وسيكون شكل الفوتير كما في الصورة: 


V?z FLAG counter] 


تقسيم الصفحة الرئيسية الى ثلاثة أقسام ونعني بذلك أن نقوم بتجزيئ الصفحة الرئيسية إلى ثلاث صفحات indexl.php — - index.php)‏ 
(index.php‏ 

include ونستدعيها بواسطة دالة‎ index1.php هذه الصفحة الرئيسية وستقوم باستدعاء الجزء الأول الذي سنقوم بنقله إلى‎ index.php 
تحوي الجزء الأول من الموقع ويتضمن نقل الاكواد من السطر الأول إلى قبل نهاية ديف القائمة.‎ : indexl.php 

Index2.php‏ : ويتضمن نقل ألاكواد من بداية الفوتير إلى نهاية الصفحة. 

index.php‏ : وتتضمن البقية من بداية السلايدشو إلى قبل نهاية الفوتير. 


وكما في الصور التالية: 
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۹۷ 


index1.php صفحة‎ 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Iransitional//EN" "http://Www.wWw3.Org/IR/xhtml11/DID/xhtmil-transitional.dtd"» 
«html xmins-"http://www.w3.0rg/1999/xhtml"» 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
الرواد نتكتونوجيا المعلومات<51516>‎ | Technology Pioneers</title> 
«link href-"css/style.css" rel-"stylesheet" type-"text/css" /» 
<link rel="stylesheet" type="text/css" href-"enginel/style.css" /» 
<script type-"text/javascript" src-"enginel/jquery.js"»«/script» 


N‏ ين (Qs‏ بن 


J 


9 <! < 

0 «link href="web/css/style.css" rel="stylesheet" type="text/css" media-"all" /» 
1 </head> 

2 <body> 

<--هتا يداية الديف العام --!> 3 

4 «div class-"main"» 


o 


Lia--»‏ يداية ترويسة الهوقع--!> 
«div class-"header"»‏ 

«img src-"images/logo.png" class-"imglogo" /» 
«/div» 


O 0 0 


Lia--»‏ يداية القائمة--!> 

<div class-"menu"» 

«ul» 

<li><a href-"index.php"»iia. 5, «/a»«/li» 

<li><a href-"£grid"»L1i sLí24  5«/a»«/li» 
<li><a href-"£"»1i Jila s| gac/a»«/li» 
«li»x«a href="#">} Lasi آخر‎ >/3<>/11< 
<li><a href-"£"5»45 4 5 jg a«/a»«/li» 
<li><a href-"£"»Li 5 اتصل‎ </a></1i> 


دم زم CQ‏ ظر (n‏ 


o 


</ul> 
</div> 
تهاية القائمة--!>‎ La- 


index2.php صفحة‎ 


<--يداية القوتير--!> 
«div class-"footer"»‏ 


Ww N 


tn ضر‎ 


<div class="news"> 

«div class-"headline"»j;L.5N| رزZخآ‎ </div> 

<ul> 

>11<>2 href="#"> التكتولوجيا تقتتح دورة تصميم واصضاقة المواقع الالكتروتية‎ 3154)€/a»«/li» 
>11<>3 الكرام<"#4"-2ع22‎ a dax) <3<>/11/>رواد التكتولوجيا يتقدم يعرصض جديد‎ 

<3<>/11/>دورات تدريبية لمصممي المواقع ومدراء الاعلام الالكتروتي قي المؤسسات<"+"-2ع2ط «li»«a‏ 
<3<>/11/> عرض خاص يمتاسية شهر رمضان | Xli»«a href-"£"»3,L.a‏ 

<3<>/11/>رواد التكتولوجيا يهتئ الامة الاسلامية والعريية يهتاسية شهر رمضان المبارك>"#"=href‏ 11<>2> 
</ul>‏ 

</div> 


oe 


«div class-"links"» 
«div class-"headline"»,,.c Lits Lol ,-:«/div» 
oa> رواد التكتولوجيا شارع‎ 
«br /» 
00967714490030 : تلقون‎ 
«br /» 
00967714490030 : تلقاكص‎ 
«br /» 
اليريد الإلكتروتي‎ : en yusufÉyahoo.com 
«br /» 
714490030 : جوال‎ 
«br /» 
أو عيرصقحاتتا الاجتماعية‎ 
<br /» 
«a href-"https://www.facebook.com/TechPio"»«img src-"icons/f.jpg" width-"32" /»«/a» 
«a href-"http://www.techpio.net"»«img src-"icons/t.jpg" width-"32"/»«/a» 
«a href-"http://www.techpio.net"»«img src-"icons/y.jpg" width-"32"/»«/a» 
«a href-"http://www.techpio.net"»«img src-"icons/1.jpg" width-"32"/»«/a» 
<br /» 
«/div» 


«div class-"visitors"» 
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صفحة index.php‏ : وهو الكود الذي مابين نهاية القائمة 


w beginning --< 
<div class="slide"> 
«div id-"wowslider-container1"» 
«div class-"ws images"»«ul» 
«li»x«img src-"datal/images/1.png" alt-"1 "عتوان‎ title-"i4,.5,,1s JV! "مرحيا يكم في دورة المواقع‎ id-"wowsl 0"/»«/li» 


<li><img src-"datal/images/2.png" alt-"2 "عتوان‎ title-"2 glis" id-"wowsl 1"/»«/li» 


tn S w 


m 


E 


HUM <li><img src-"datai/images/3.png" alt-"3 "عنوان‎ title-"3 "عنتوان‎ id-"wowsl 2"/»«/li» 
IM >11 <> 1210 src-"datal/images/4.png" alt-"4 glis" title-"4 "عنوان‎ id-"wowsl 3"/»«/li» 
IEEE cli»xcimg src-"datal/images/5.png" alt-"5 "عتوان‎ title-"5 glis" id-"wowsl 4"/»«/li» 
IPEM c/ul»xc/div» 
عه‎ <div class-"ws bullets"»«div» 

IEEE <a href-"£" title-",. £2 5!,ic"»«img src-"datal/tooltips/chrysanthemum.jpg"/»1«/a» 
كاه‎ <a href-"£" title=" ùs 5!,ics"»«img src-"datal/tooltips/desert.jpg"/»2«/a» 
EE <a href-"£" title="; ùs j5!,ic"»«img src-"datal/tooltips/hydrangeas.jpg"/»3«/a» 
EE <a nref-"£" title=" ùs 5!,ics"»«img src-"datal/tooltips/jellyfish.jpg"/»4«/a» 
MEM <a href="#" title="; jl gie"><img src-"datal/tooltips/tulips.jpg"/»5«/a» 
IEEE </div></div> 
20 «div class-"ws shadow"»«/div» 
21 «/div» 
PFEMM </div> 
23 «!--End Slide show--» 
24 
25 >!-- محتوى الموقع‎ lola --< 
ناتك‎ <div class-"content"» 
27 <div class-"top-box"» 
<22/>ماتقوم يه رواد التكتوئلوجيا<22>‎ 
<hr> 
<p> 


موقع إتلتكتروتي متخصص قي تكتونوجيا المعلومات ويقدم 4345 تصميم واستضاقة المواقع الالكتروتية وانتسويق الالكتروتي 
مواقع : daas)‏ - إخبارية - تجارية - تعليهية -قواعد بياتات 
إعلاتات Upas‏ : قيص يوك - جوجل - تشرات الكتروتية رسمية 
</p>‏ 
</div>‏ 
الجزء الثاتي من المحتوى --!€ 


«div class-"grid s" id-"grid"» 


--» 


الخطوة الأخيرة وهي اضافة include Alla‏ لبداية ملف index.php‏ واستدعاء الصفحة index1.php‏ كما في الصورة : 
1 
<?php include ("indexi.php");?»‏ 
بنفس الطريقة السابقة نقوم بإضافة الصفحة index2.php‏ لنهاية الصفحة index.php‏ كما في الصورة: 


<-- تهاية محتوى الموقع < 


«?php include ("index2.php");?» 


بعد تجزيئ الصفحة الرئيسية واستدعاء الملفات او الجزئين ستظهر الصفحة الرئيسية كما هي سابقا. 
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المرحلة الثانية (قواعد البيانات) 


سنقوم بعمل الجداول التالية (القائمة - الخدمات - الأخبار - مدراء الموقع ) : 


قاعدة البيانات project‏ 

الول اا ملاحظات 

id — head - det menu‏ الرقم - عنوان القائمة - التفاصيل 

Id - head - img - det serv‏ رقم الخدمة — العنوان — الصورة — تفاصيل 
Id - date — head - det news‏ الرقم — التاريخ - العنوان - التفاصيل 
Id — name - password admin‏ الرقم — الاسم الباسورد 


وسيكون شكل قاعدة البيانات مع الجداول كما في الصورة : 


admin [Bl « project B « localhost E] E 
Triggers 3 | sus P | استيراد‎ Ej | تصدير‎ [ERO Jas 42 c هذا‎ SQLOL] | يتاء‎ WÉ | استعراض‎ [E] 


DEC a dya‏ توع Collation‏ الحجم الحمل الزاند 

= كيلويايت‎ 16 utf8_general_ci InnoDB 0~ سقط‎ Q إقراغ‎ © os إبحت ةج‎  ءاتب‎ né استعراض‎ [rj] admin O 

= كينئويايت‎ 1€ utf8_general_ci InnoDB 0~ xg إقراغ‎ J gi Lm استعراض م يناء چ‎ | [ menu |j 

a كينويايت‎ 16  utf8 general ci InnoDB 0~ سقط‎ Q ig بتاء چ إبحت 6 إدخال‎ ye استعراض‎ [7j news O 

ser [)‏ ]7[ استعراض م يناء چ LÀ‏ 6 إدخال Q £g‏ سقط ~0 utf8_general_ci InnoDB‏ 16 كينويايت = 

4 جدول (جداول) المجموع 0 utf8 general ci InnoDB‏ 64 كيلوبايدت 0 بايد 
xe] swe 4‏ ]] 


والجداول كما في الصور التالية : 


: admin جدول‎ 


E admin « project B « localhost E 


Triggers 3à | استيراد | ى عمليات‎ E | ج تصدير‎ Jas $6 | إيحث‎ à | SQL [] | استعراض | تمل يناء‎ [S] 
العملية‎ 


m إفتراضي‎ qi seg Collation الاسم توع‎ # 
Distinct values [E] كاماد‎ oat [| Spatial Fg فبرست‎ E]: [gu ھی‎ LL © o ۶ AUTO INCREMENT «c Y int(3) id 1 9 
Distinct values [7] انتص كاماد‎ [F] Spatial f£ فهرست‎ Ea [WI Qs م‎ «Y لا‎ utfü general ci varchar(88) name 2 i j 
Distinct values [& 245 النص‎ [s] Spatial pE فبرست‎ Ej: bol ew AY لا‎ utf8 general ci varchar(88) password 3 5 


m E] 3 [o ي أساسي‎ I © o م‎ cw poo c0. 
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menu جدول‎ 


menu f « project © « localhost] 


Triggers 35 | عمليات‎ P | استيراد‎ Ej) | تصدير‎ ] Jus g | SQL [] | استعراض | آم يتاء‎ [Z] 


—— E إقتراضي‎ qi seg» Collation الاسم توع‎ # 
Distinct values [E] 245 النص‎ [x] Spatial Fg هي أساسي 4[ فرید چ فيرست‎ LL @ s م‎ AUTO INCREMENT «eY Y in(4) — id 1 O 
Distinct values [J 245 522 [3] Spatial f فهرست‎ Eai [W سقط ھی ساسی‎ Qs wY XY utf& general ci varchar(77) head 2 O | 
Distinct values [E] كاماد‎ sai [gg] Spatial P —)8 نرید چ‎ [au ھی‎ Lm © م تیر‎ «Y Y utf8 general ci varchar(222) det 3 5 | 


m G ox [o Hep IR © ى تير‎ aag ed 7| 


news جدول‎ 


news [fi « project B « localhost] 


Triggers 36 | استيراد | ى عمليات‎ E | تصدير‎ (jo Jus X6 | 2 | 501 [j | يناء‎ 36 | o9 [E] 


# الاسم توع Collation‏ الخواص qi‏ إقتراضي E‏ العملية 
AUTO INCREMENT «cy Y in(3) id 1 O‏ م oss‏ @ ستط هي أساسي E]: [9b‏ فبرست Distinct values [ 245 ja: [sj Spatial f£‏ 
gg zou oW utf8 general ci varchar(33) date 2 |)‏ سط J+ (y —— d»‏ فيرست Spatial p‏ ]7| التص 245 ] | Distinct values‏ 
utf8 general ci varchar(222) head 3 5‏ لا KY‏ م تغيير © سقط ھی Gb‏ فريد چ فبرست [sj Spatial f£‏ النص كاماد Distinct values [E]‏ 
AY X utfü general ci varchar(333) det 4 [J]‏ م ss‏ © 4 أساسي Ej [g‏ فبرست ] Distinct values [7] 24$ oai |] Spatial‏ 


† _ ® تحديد الكلمع المحدد:. f o B‏ » @ سط هي أساسي B] c) BPO‏ فهرست 


serv جدول‎ 


servili « project © « localhost f] 


| Triggers 35 استيراد | ى عات‎ E 0e ج‎ Jas + | 2 Sa | بناء‎ A | استعراض‎ [E] 


# الاسم توع Collation‏ الخواص حائي إقتراضي إضاقي العملية 
AUTO INCREMENT qiyo Y int) id 1 ®‏ م oss‏ © ستط هي E]: [be^‏ فبرست 72 Distinct values [ 24$ oad [x] Spatial‏ 
«Y Y utf8 general ci varchar(88) head 2 | |‏ م ss‏ © سقط i]: [ge D‏ فبرست Distinct values [3 245 sað [s] Spatial [Fg‏ 
utf8 general ci varchar(222) img 3 5‏ لا الاقىء م تر ق سط d»‏ أساسي [y‏ فرید چ فيرست [sr Spatial Fg‏ التص كاماد Distinct values [E]‏ 
Y utf8 general ci varchar(333) det 4 J‏ لاسي م os‏ © سقط D‏ أساسي ] Distinct values [J 245 osai! |] Spatial pE —)8 E‏ 


__ ® تحيد ch 7 c9‏ م D I Q a‏ أساسي [ )3 [E]‏ فهرست 
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مرحلة ربط قواعد البيانات مع التصميم 
في هذه الخطوة نقوم بعمل مجلد admin‏ للصفحات وكل جدول له مجلد وسيكون كما في الصورة : 


Name Date modified Type Size 
ıJ admin Y-MJ/.i/YAp Ml File folder 
J menu Y-M/.f/YAa +\:£) File folder 
J news ٠١15/0/78 p \:£) File folder 
J sev ٠١15/1/75 a +\:£) File folder 


agii‏ بتصميم ستايل معين للصفحات التي ستدير الموقع وتتضمن خلفية وديف وتنسيق للنصوص وسنبدأ بصفحة الإدخال الخاصة بالقائمة داخل مجلد 
«menu‏ ننشئ صفحة اسمها insert.php‏ والخاصة بإدخال البيانات الخاصة بجدول القائمة. وسنقوم بعمل كلاسات للتنسيق وذلك بعمل ملف CSS‏ 
وسنسميه admin.css‏ ونعمل له مجلد بجانب المجلدات أعلاه ونسميه ess‏ ندخل الان المجلد menu‏ وننشئ الصفحة insert.php‏ ونقوم بعمل 
الكلاس اللازم وربطه بها. وستكون الصفحة insert.php‏ كما في الكود: 


<title> SLI إدخال يياتات‎ Ax doc/title» 

«link href-"../css/admin.css" rel="stylesheet" type="text/css" /» 
</head> 

<body> 

<div class="admin"> 


<div class-"b"» إدخال بياتات القائمة‎ >/017< 
<br /»«br /» 
Lia القورم‎ 


«/div» 
</body> 


والملف الموجود في مجلد ess‏ 531.5( اسميناه admin.css‏ كما في الصورة : 


bodyt 
background-color: #F4F4F4;} 


5 
6 


.admin ( 
background-color: #fff; 
border: #666 solid 1px; 
width: 400px; 
height: 400px; 
margin:O auto; 
direction:rtl; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:12px; 
padding:11px 5px 11px Spx: 
border-radius:4px 4px 4px 4px; 
) 


bt 
font-family:Tahoma, Geneva, sans-serif; 
color:red; 
text-decoration:underline; 
text-align:center;! 
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وسيكون شكل الصفحة insert.php‏ في الرابط (http://localhost/project/admin/menu/insert.php)‏ كما في الصورة : 


€ > Q'|[localhost/project/admin/menu/insert.php yv + »* u 5 2 & di z 


القورم 


نبدأ بعمل صفحتي الفورم وعملية الادخال الخاص ب جدول (insert.php — insert process) menu‏ : 
صفحة insert.php‏ : 


«div class-"b"» إدخال يياتات القائمة‎ </div> 

<br /»«br /» 

«div» 

«form action-"insert process.php" method-"post"» 
:العتوان‎ <br /» 

«input type="text" name-"head"»«br /» 

«br /»‏ :التقاصيل 

«textarea name-"det" rows-"7" cols-"40"»«/rtextarea» 
<br /» 

«input type="submit" value-"h ji >"> 

</form> 

</div> 

</body> 

</html> 


هم كم قم قم قم 
فز يخم w‏ 


هم فم 


5 
6 
8 
9 
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ر 
B0‏ 


N 


شكل الصفحة بعد تعديل الطول للديف admin‏ إلى ٠١‏ بكسل: 


€ جه‎ C [!localhost/project/admin/menu/insert.php 34-18 Zz 


العنوات: 
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نقوم بعمل صفحة config.php‏ والذي يحوي كود الاتصال بقاعدة البيانات ونضعه ضمن المجلد project‏ والكود كما في الصورة: 


«?php 


$con = mysql connect ("localhost","root","") 
or die("cannot connected"); 


mysql select db("project",Scon); 


?> 


وايضا قمنا بعمل ملف اتصل آخر config2.php‏ لصفحات الادخال كون الكود السابق ينطبق مع صفحات اخراج البيانات وسيكون الكود لصفحة 
config2.php‏ كما في الصورة: 


«?php 
$con- mysqli connect ("localhost","root","","project"); 
?» 


في صفحات التعديل و الحذف نستخدم الملف config.php‏ و فقي صفحات الإخر c!‏ نستخدم او نر بطها بالملف config2.php‏ 


insert process.php صفحة‎ 


áilacc/title»‏ ادخال البياتات<251516> 

«link href-"../css/admin.css" rel="stylesheet" type="text/css" /» 
</head> 

<body> 

<div class="admin"> 

<?php 

include ("../../config2.php"); 


$head= $ POST['head']; 
$det=$_POST['det']; 


Ssql-"INSERT INTO menu (head, det) VALUES('Shead','Sdet')"; 


if (!mysqli query(Scon,Ssq1)) 
1 
die('Error: ' . mysqli error(S$con)); 
) 
echo الاضاقة يتجاح"‎ aac"; 
echo "<a href-'../index.php'»à4.a4. 5,13 />عودة‎ 2 <": 
mysqli close (Scon); 


في سطر ١١‏ ربطنا الصفحة بملف config2.php-ll‏ والتي تحوي الاتصال بقاعدة البيانات ولاحظ (/../..) أي اننا نعود للخلف لان الملف في المجلد 
الرئيسي بالموقع وبقية الخطوات تعلمناها مسبقا. في سطر ۲١‏ رابط العودة للرئيسية سيتم ربطها لاحقا بعد الانتهاء من ملفات المجلد menu‏ الخاص 
بالقائمة. 


وبهذا انجزنا عملية الإدخال نقوم الان بإنشاء صفحة index.php‏ والتي تعرض البيانات وتحوي روابط للتعديل والحذف وهي كما يلي : 
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"ZEE <?php 

2 include ("../../config.php"):; 

HE Sresult-mysqi query ("SELECT * FROM menu ORDER BY id ASC"); 
5 2> 

<html>‏ | كن 


- 


<title> SLijl«/title» 

«link href-"../css/admin.css" rel-"stylesheet" type-"text/css"» 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 

<body> 

<div class="admin2"> 

«a href-"insert.php"»a4 4» إضاقة‎ </a><br/><br/> 

«?php 


تن D‏ د 


£n uS فم يم نز‎ (C 


eo 


echo "«table width-'100$' border-0 align-center»"; 
echo "<tr bgcolor-'£CCCCCC'»"; 

echo القائمة<20>"‎ jنlgie</td>";‎ 

echo :"<20/>تقاصيل<50>"‎ 

echo :"<20/>تعديل<50>"‎ 


c‏ ما 


1 
1 
1 
1 
1 
1 
1 
1 
1 


0 
echo "«/tr»";‏ 2 
"lir(Sresult === FALSE) {‏ 
die(mysql error()): // TODO: better error handling‏ 5 
) 6 
while ($row = mysql fetch array ($result) ) {‏ 8 
echo "<tr>";‏ 9 
echo "«td»".$row['head']."«/td»";‏ 30 
echo "«td»".Srow['det']."«/td»";‏ 31 
echo "«td»«a href-'edit.php?id-$row[id]'»,j,ix-«/a» | «a href='delete.php?id=$row [id] '>ãiz</a></td>";‏ 32 
H‏ 33 
echo "«/table»";‏ 34 
»? 35 
تم وضع الكود ضمن (body)-l‏ وستكون النتيجة كما في الصورة بعد ادخال بيانات تجريبية : 
A Z Lu [=] =‏ هه ده CG [localhost/project/admin/menu/‏ > € 
اضافة جديد 
عنوان القائمة تفاصيل تعديل 
الرئيسية تفاصيل هنا حول الرئيسية تعديل | حذف 
خدماتنا تفاصيل هنا حول الخدمات تعديل | حذف 
من نحن تفاصل حول من نحن تعديل | حذف 


ولا ننسى أن نغير الارتفاع إلى auto‏ للكلاس admin2‏ وهو نسخة من admin‏ لمقاس أكبر وقت والحاجة كما في صفحة التعديل. 


ننتقل الآن لصفحة التعديل edit.php‏ وسيكون الكود كما في الصورة : 
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الجزء الأول : 


«?php 

include once("../../config.php"):; 
if(isset(S POST['update'])) 

1 


فر 


QN‏ ضر ي 


لزنا 


$id = $ POST['id']:; 
$head-$ POST['head']:; 
$det-$ POST['det']; 


1 


) i0 تن‎ 


//updating the table 
Sresult-mysql query("UPDATE menu SET head-'Shead',det-'Sdet' WHERE id-$id"):; 


[ 


vam 


1 
1 


//redirectig to the display page. In our case, it is index.php 
header("Location: index.php"); 

) 

?» 

<?php 

// getting id from url 

$id = S GET['id']: 


//selecting data associated with this particular id 
$result-mysql query("select * from menu where id-Sid"); 


while(Srow-mysql fetch array(Sresult)) 
t 
Shnead = Srow['head']; 
Sdet = Srow['det']; 
) 
?» 
<html> 
البياتات<21516>‎ pouss«/title» 
«link href-"../css/admin.css" rel="stylesheet" type="text/css"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 


الجزء الثاني: 


<body> 

<div class="admin2"> 

«a href-"index.php"»i.4. 5,3! </a> 
<br/><br/> 

«form name-"formi" method="post" action-""» 
«table border-"0"» 


«tr» 
اسم القائمة<0<>‎ >/:20< 
«td» 
<input type="text" name-"head" value-'«?php echo $head;?»'» «/td» 
</tr> 
<tr> 


</td>‏ التقاصيل<كا> 


<td><textarea name-"det" cols="40" rows-"7"»«?php echo $det; ?></textarea> </td> 
</tr> 
<tr> 


<td><input type="hidden" name="id" value-'«?php echo $_GET['id'];?>'> </td> 
<td><input type="submit" name-"update" value=" suac"»«/td» 
</tr> 
</table> 
</form> 
</div> 
</body> 
</html> 


لا جديد في الأكواد وكلها Sa‏ 5 وبنفس الطريقة وحسب ما تعلمناها مسبقا. 
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نأتي لصفحة الحذف delete.php‏ 


«?php 
//including the database connection file 
include ("../../config.php"):; 


//getting id of the data from url 
$id = $ GET['id']: 


//deleting the row from table 
$result-mysql query("DELETE FROM menu where id-$id"); 


//redirecting to the display page (index.php) 


header ("Location: index.php") ; 
2> 


عمل صفحة index.php‏ داخل المجلد admin‏ والتي ستكون لوحة التحكم الخاصة بمدير gigal‏ ومنها يصل المدير الى صفحات القائمة والأخبار 
وغيرها للتعديل والحذف وتتكون من روابط فقط وسيكون الكود كالتالي : 


s Name Date modified Type Size 
لال‎ admin YAM/.i/YRa «1:21 File folder 
i css Y-M/.i/YAa-cY- File folder 
لال‎ menu Y-M/.i/YAa Yl File folder 
لل‎ news ١١15/٠1/15م‎ File folder 
J ser Ye1E/-E/Y a +\:£) File folder 
|" index 7١15/1/75م‎ YA PHP Script 118 
: الكود‎ 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
التحكم بالموقع<21516>‎ ةحول>/tit1e<‎ 

«link href-"css/admin.css" rel-"stylesheet" type-"text/css" /» 
</head> 

<body> 

<div class="admin"> 

<div c1ass="ط"<ايجولوتكتلا قي لوحة التحكم || رواد‎ HJ Li»ja«/div» 


<br /> <br /> 


<a href-"menu/index.php"»aa4$5Li3j/«/a» || <a href="#">} — =Yi</a> 
<br /> 
<a href="#"> التقددمات‎ </a> || <a href="#"> مدراء الموقع‎ </a> 


<br /»«br /» 
</div> 
</body> 


ربطنا القائمة بالملف index.php‏ الذي بداخل المجلد menu‏ وهو الخاص بالقائمة وهو الذي أنشأناه وسيكون شكل الصفحة كما في الصورة: 


DB localhost/project/admin/s* X 


القائمة || الآخار 
الخدمات_| | مدراء الموقع 
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نقوم الان بعمل الصفحات اللازمة لجدول الأخبار news‏ : 
نقوم بعمل صفحة الادخال insert.php.‏ والصفحة التي تقوم بالعملية insert. process.php‏ بنفس طريقة عمل ملفات الجدول menu‏ : 
صفحة insert.php‏ : 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
«title»;Lí53! إدخال يياتات‎ dxdec/title» 

<link href-"../css/admin.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div class="admin"> 


tn W‏ & ل 


م فم د 


5 
© 


«div class-"b"» إدخال يياتات الأخبار‎ </div> 

<br /><br /> 

<div> 

«form action-"insert process.php" method="post"> 

<br /»‏ :العتوان 

<input type="text" name-"head"»«br /» 

«br /»‏ :التاريخ 

«input type="text" name-"date" value-"«?php echo date("l-Y/m/d"); ?»"»«br /» 


(n سن ظر‎ IN ID 


e 


- 66 ها 5 


«br /»‏ :التقاصيل 

«textarea name-"det" rows-"7" cols-"40"»«/textarea» 
<br /» 

«input type="submit" value-"h i >"> 

«/form» 

«/div» 

</body> 

</html> 


€ Qi ظر‎ QN فم‎ C 


J 


4 
1 
1 
1 
1 
1 
17 
1 
1 


الجديد في الصفحة السابقة أضفنا التاريخ من خلال كود php‏ وسيتم ظهورة بشكل اتوماتيكي وستكون الصورة كما في الصفحة : 


€ جه‎ Œ  [)localhost/projec/admin/news/insert php GF s od 5 7 & ð — 


ادخال سانات الاخبا 


العنوات: 

|رواد التكنولوجيا يقيم دورة تدريبية | 

التاريخ: 

Tuesday-2014/04/29| 

التقاصيل: 

تفاصيل حول الدورة التدرييية هتا 
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: insert process.php صفحة‎ 


un 


i lac</title>‏ ادخال البياتات<251516> 

«link href-"../css/admin.css" rel-"stylesheet" type-"text/css" /» 
</head> 

<body> 

<div class="admin"> 

<?php 

include ("../../config2.php"); 


e 


- 


قم مهم فم 


$head- ؟ه‎ 
$date- $ POST['date']; 
$det-$ POST['det']: 


pa pa 
ظر‎ QN م قات کا‎ 


[n] 


e 


Ssql-"INSERT INTO news (head ,date ,det) VALUES('$head','date','Sdet')"; 


Co‏ م د 


if (!mysqli query ($con, $sq1)) 
t 
die('Error: ' . mysqli error($con)): 
) 
echo :"تمت الاضاقة يتجاح"‎ 
echo "<a href-'../index.php'»i.4.5,13 :"<3/>عودة‎ 
mysqli close(Scon); 
?» 
</div> 
</body> 
</html> 


1 
1 
1 
1 
1 
2 


H ¢ 


نقوم بعمل iaia‏ عرض البيانات هي index.php‏ داخل مجلد news‏ وسيكون الكود كما في الصورة : 


«?php 
include ("../../config.php"); 


$result-mysql query("SELECT * FROM news ORDER BY id ASC"); 
?» 


ر يم ين ظر tn‏ 


<html> 

</title>‏ الأخبار<1516<> 

<link href-"../css/admin.css" rel="stylesheet" type="text/css"> 
<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
</head> 

<body> 

<div class="admin2"> 

<a href-"insert.php"»u 4» ial </a><br/><br/> 

«?php 


o 


) ص‎ O 


5 
[ 


echo "«table width-'100$' border-0 align-center»"; 
echo "<tr bgcolor-'£CCCCCC'»"; 

echo "«td»95! ,ix 3I «/td»"; 

echo "«td»àjLigi«/td»"; 

echo "«td»pueLi-c/td»"; 

echo "«td»ouxc«/td»"; 

echo "«/tr»"; 


if(Sresult === FALSE) ( 
die(mysql error()); // TODO: better error handling 
) 


while ($row = mysql fetch array(Sresult))t 
echo "«tr»"; 
echo "«td»".Srow['head']."«/td»"; 
echo "«td»".Srow['date']."«/td»"; 
echo "«td»".S$row['det']."«/td»"; 
echo "«td»«a href-'edit.php?id-$row[id]'»,];!1:«/a» | «a href-'delete.php?id-$row[id]'»3i»«/a»«/td»"; 
) 
echo "«/table»"; 
?» 
«/div» 
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۲۰۹ 


بنفس الآلية في Jay!‏ الخاص menud‏ مع تعديل بسيط اسماء الأعمدة واسم قاعدة البيانات وتعديل بسيط على جدول العرض وسيكون شكل 
الصفحة كما في الصورة : 


| D localhost/project/admin/news/index.php ph Ed * چ‎ [e] 


اضافة جديد 


رواد التكنولوجيا يقيم دورة تدريبية Tuesday-2014/04/29‏ تفاصيل حول الدورة التدريبية هنا تعديل | حذق 
رواد التكنولوجيا يقيم دورة تدريبية date‏ تفاصيل حول دورة المواقع .. تعديل | حذقف 


نقوم بعمل صفحة التعديل edit.php‏ وسيكون الكود كما في الصورة : 


الجزء الأول : 


«?php 
"EM include once("../../config.php"):; 
if(isset(S POST['update'])) 


4 t 
5 
6 Sid - $ POST['id']:; 
7 $head-$ POST['head']; 
8 $date-$ POST['date']; 
9 $det-S$ POST['det']; 
10 
11 //updating the table 
12 $result-mysql query("UPDATE news SET head-'$head',date-'$date',det-'$det' WHERE id-$id"); 
13 
14 //redirectig to the display page. In our case, it is index.php 
15 header("Location: index.php"); 
16 1 
17 ?» 
8 <?php 


19 //getting id from url 
20 Sid = $ GET['id']; 


22 //selecting data associated with this particular id 
$result-mysql query("select * from news where id-$id"); 


(n (€ 


2 while(Srow-mysql fetch array (Sresult)) 
26 1 
27 Snead = Srow['head']; 
2 $date = Srow['date']:; 
$det = $row['det']; 
30 } 
31 ?> 
32 <html> 


<tit1e/>تعديل‏ اليياتات<عtit1>‏ ك 
ES «link href-"../css/admin.css" rel="stylesheet" type="text/css">‏ 
<head>‏ 35 
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Yie 


الجزء الثاني 


</head> 
<body> 
<div class="admin2"> 
«a href-"index.php"»i.a.5,] </a> 
Xbr/»«br/» 
«form name-"form1" method="post" action-""» 
43 <table border-"0"» 
44 <tr> 
45 <td>gl العتو‎ </td> 

<td> 

<input type="text" name-"head" value-'«?php echo $head;?>'> </td> 

</tr> 


«tr» 
التاريخ<20>‎ </td> 
«td» 
«input type="text" name-"date" value-'«?php echo $date;?»'» </td> 
</tr> 


in (n شر ضر صن‎ ob 
) ما‎ 6 


N فر‎ O 


n 


W‏ کر كن 


ار 


<tr> 
التقاصيل<20>‎ </td> 


e 


«td»«textarea name-"det" cols-"40" rows-"7"»«?php echo Sdet; ?»«/textarea» </td> 
«/tr» 
«tr» 


<td><input type="hidden" name="id" value-'«?php echo $ GET['id'];?»'» «/td» 
<td><input type="submit" name-"update" value-"A,í14-"»«/td» 
«/tr» 
«/table» 
«/form» 
«/div» 
</body> 
</html> 


€ OV C). Cy Ch. y (n. Cn. Qn (n (n n 


(n 4 Q IN P O 10 


5 ل 


[5] 


MM 5‏ & ل 


وستكون صفحة التعديل كما في الصورة: 


١ | [5 localhost/project/admin/news/edit.php?id-1 $5 o4 ot 


العنوان رواد التكتولوجيا يقيم دورة تدريبية 


Tuesday-2014/04/29 التاريخ‎ 


تقاصيل حول الدورة التدريبية Lia‏ 
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نقوم الان بعمل صفحة delete.php‏ للجدول news‏ وسيكون الكود مشابه تماما للجدول menu‏ مع تعديل بسيط وسيكون الكود : 


«?php 
//including the database connection file 
include ("../../config.php"):; 


//getting id of the data from url 
Sid = S GET['id']; 


//deleting the row from table 
S$result-mysql query("DELETE FROM news where id-$id"); 


//redirecting to the display page (index.php) 
header ("Location: index.php") ; 
?» 


نقوم الان hiy‏ صفحة index.php‏ الموجودة في المجلد news‏ مع الصفحة index.php‏ في المجلد admin‏ وسيكون الكود بعد وضع الرابط كما في 
الصورة : 


<body> 
<div class="admin"> 
<div class="b">laz JSI قي نوحة التحكم || رواد‎ HJ Líi»j2«/div» 


<br /» «br /» 

«a href-"menu/index.php"»ia SL ij! </a> || «a href-"news/index.php"»;L. .— sVXi«/a» 
<br /» 

<a href="#"> الختدمات‎ </a> || <a href="#"> الموقع‎ sl jaa </a> 


<br /»«br /» 
</div> 
</body> 


كما نلاحظ ربط صفحة الأخبار في سطر AY‏ 


ننتقل الان للجدول serv‏ والخاص بالخدمات في مجلد serv‏ وبنفس طريقة عمل الجداول السابقة» lai‏ بعمل صفحة الادخال insert.php‏ وسيكون 
الكود الخاص بها كما في الصورة: 


Insert.php 


«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
«title»3La44 | إدخال بياتات‎ áxà&ec/title» 

«link href-"../css/admin.css" rel-"stylesheet" type-"text/css" /» 
</head> 

<body> 

<div class="admin"> 


<div class-"b"» إدخال يياتات الخدمات‎ </div> 
<br /»«br /» 
«div» 
«form enctype-"multipart/form-data" action-"insert process.php" method-"POST"» 
ği pn: «br /» 
«input type="text" name-"head"»«br /» 
:الصورة‎ «br /» 
«input type-"file" name-"img"»«br /» 


<br /»‏ :التقاصيل 

«rtextarea name-"det" rows-"7" cols-"40"»«/rtextarea» 
«br /» 

«input type="submit" value-"h i >"> 

</form> 

</div> 

</body> 

</html> 


یں ظر tn‏ 


e 


N‏ يخ نيم N‏ يم 


J 
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وستكون الصفحة كما في الصورة: 


[3 localhost/project/admin/serv/insert.php pd 


دخال سانات الخدمات 


العنوان: 


الصورة: 
No file chosen Choose File‏ 


التفاصيل: 


صفحة عملية الادخال insert. process.php‏ : 


w 


<body> 

<div class="admin"> 

<?php 

include ("../../config2.php") ; 

$target "../../imgs/"; 

$target $target . basename( $_FILES['img']['name']); 


ما 


[v] 


کا MN‏ ين شر صن 


$head- ؟‎ 
Simg-(S FILES['img']['name']): 
$det-$ POST['det']:; 


1 
1 
1 
1 
1 
1 
1 


6 


Ssqgl-"INSERT INTO serv (head ,img ,det) VALUES('Shead','Simg','Sdet')"; 


if(move uploaded file($ FILES['img']['tmp name'], Starget)) 
( echo ""; ) 


25 else 

26 1 

:"لم يتم رقع الملف ..هتاك مشكلة" echo‏ 27 

28 1 

if (!mysali query ($con, $sql) )‏ افك 

3 1 

3 die('a3La2Y! :لم تتم‎ ' . mysqli error(S$con)); 
} 


echo الاضاقة يتجاح"‎ aac"; 

echo "<br>"; 

echo "<a href-'../index.php'»à.a4. 5,13 55,:«/a»"; 
mysqli close ($con); 

2> 

</div> 

</body> 


کر نزخ نز ظر 60١ X!‏ ل 


م6 


0 


OQ OQ OQ O O Q‏ € كر 


O t 


لا جديد فيما تعلمناه سابقا نفس الاكواد المشروحة من قبل . نقوم الان بعمل صفحة العرض وفيها يتم عرض البيانات المدخلة في جدول sery‏ واضافة 
روابط التعديل والحذف. 
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: index.php صفحة‎ 


D localhost/project/admin/serv/ uwo* d» FF GZ نف ا‎ z 
اضاقة جديد‎ 
رواد التكنولوجيا يقيم دورة تدريبية ي ب رواد التكنولوجيا يقيم دورة تدريبية رواد التكنولوجيا يقيم دورة تدريبية تعديل | حذف‎ 


رواد التكنولوجيا يقيم دورة تدريبية 2 رواد التكنولوجيا يقيم دورة تدريبية 2 رواد التكنولوجيا يقيم دورة تدريبية 2 تعديل | حذف 


كود الصفحة index.php‏ : 


5 


</title>‏ الغدمات<21516> 

«link href-"../css/admin.css" rel-"stylesheet" type-"text/css"» 
<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
</head> 

<body> 

<div class="admin2"> 

<a href-"insert.php"»a o4» إضاقة‎ </a><br/><br/> 

«?php 


شم قم قم قم قم كم 
ت 0 O‏ غم زم یں ظر كن 


هم فم 
إزء |" 


echo "«table width-'100$' border-0 align-center»"; 
echo "<tr bgcolor-'£CCCCCC'»"; 

echo "«td»j5! ,ixJI«/td»"; 

echo انصورة<50>"‎ >/ 20<" : 

echo :"<50/>تقاصيل<50>"‎ 

echo :"<20/>تعديل<250>"‎ 

echo "</tr>"; 


o 


1 


Oi‏ | ر 


if(Sresult --- FALSE) ( 
die(mysql error()); // TODO: better error handling 


N‏ يم يم يم 


} 


while ($row = mysql fetch array(Sresult))(t 
echo "<tr>"; 
echo "«td»".Srow['head']."«/td»"; 
echo "<td>" ."<img src=. ./../imgs/".$row['img'].' height-"70" width"30">'."</td>"; 
echo "«td»".Srow['det']."«/td»"; 
echo "«td»«a href-'edit.php?id-$row[id]'»,p,!x-«/a» | «a href-'delete.php?id-$row[id]'»3i»«/a»«/td»"; 
) 
echo "«/table»"; 
2> 
</div> 
</body> 
</html> 


<br /» «br /» 

«a href-"menu/index.php"»aa4 SLi </a> || «a href-"news/index.php"»j01. .  sVXi«/a» 
<br /» 

«a href-"serv/index.php"» الغخقددمات‎ </a> || <a href="#"> الموقع‎ sl! jaa </a> 


«br /»«br /» 


«/div» 
</body> 
</html> 
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ننتقل لعمل صفحة التعديل والحذف edit.php‏ : 
الجزء الاول : 


«?php 

include once("../../config.php"):; 
if(isset(S POST['update'])) 

1 


خم يم ين A‏ 


m 


e 


Sid = S POST['id']:; 
$head-S POST['head']; 
Simg-$ POST['img']:; 
Sdev-$ POST['det']:; 


ل 


ص م 


H 
9 1 


//updating the table 
$result-mysql query ("UPDATE serv SET head-'$head',img-'Simg',det-'S$det' WHERE id-$id"); 


//redirectig to the display page. In our case, it is index.php 
header("Location: index.php"); 


قم قم فر كم قم !| 
در IN‏ ین شر صن 


- 0 


) 

?» 

«?php 

//getting id from url 
Sid = S GET['id']; 


هم در يم 
0ا O‏ 


//selecting data associated with this particular id 
$result-mysql query ("select * from serv where id-$id"); 


while(Srow-mysql fetch array(S$result)) 
1 


ضر كن Oy‏ ل 


Snead = Srow['head']:; 
Simg = Srow['img']: 
Sdet = Srow['det']; 


م قات 


0Q NN كن كن‎ Ng 


) 

?» 

<html> 

<tit1e/>تعديل‏ اليياتات<251516> 

<link href-"../css/admin.css" rel="stylesheet" type="text/css"> 
<head> 


0 ظر كن 


Ww Ww w 


الجزء الثاني 


«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
</head> 
<body> 
<div class="admin2"> 
<a href-"index.php"»4.4.5,J!«/a» 
Xbr/»«br/» 
«form name-"formi" method="post" action-""» 
«table border-"Q0"» 
«tr» 
«td»! العتو‎ </td> 
«td» 
«input type="text" name-"head" value-'«?php echo S$head;?»'» «/td» 
«/tr» 


«tr» 
امتداد الصورة<2<0>‎ </td> 
«td» 
«input type="text" name-"date" value-'«?php echo Simg;?»'» «/td» 
«/tr» 


«tr» 
التقاصيل<0<>‎ </td> 


«td»«textarea name-"det" cols-"40" rows-"7"»«?php echo Sdet; ?»«/textarea» </td> 
«/tr» 
«tr» 
<td><input type="hidden” name="id" value-'«?php echo $ GET['id'];?»'» «/td» 
<td><input type="submit" name-"update" value=" ssa -"></td> 
</tr> 
</table> 
</form> 
</div> 
</body> 
</html> 


[a] 


N O O 
(n ظر‎ (D P 


[^1] 
e 
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yio 


وستكون كما في الصورة : 
localhost/project/admin/serv/edit.php?id- 7 DIE AF NL M © 7‏ 3[ 
الرئيسية 
العنوان رواد التكتولوجيا يقيم دورة تدريبية 
امتداد الصورة jp9.7|‏ 
رواد التكنولوجيا يقيم دورة تدريبية رواد 
التكتولوجيا يقيم دورة تدريبية 
التفاصيل 
N‏ 
— 


صفحة الحذف delete.php‏ : 


«?php 
//including the database connection file 
include ("../../config.php"); 


N صر‎ 


(n e C 


//getting id of the data from url 
Sid = $ GET['id']: 


6 


//deleting the row from table 
S$result-mysql query ("DELETE FROM serv where id-$id"); 


//redirecting to the display page (index.php) 
header("Location:index.php"); 
?» 


ننتقل للجدول admin‏ والذي سيحوي اسماء مدراء الموقع وكلمات المرور الخاص بهم وفي هذه الخطوة سننفذ نفس خطوات ال cookies‏ والاضافة 
الجديدة هنا كيف نقوم بمقارنة كلمة المرور المدخلة مع كلمة المرور في قاعدة البيانات» ايضا ستكون كلمة المرور في قاعدة البيانات مشفرة بواسطة 
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خوارزمية التشفير (MDS)‏ حيث تقوم بتشفير أي كلمة مرور من باب الحماية وعدم معرفة كلمة المرور المشفرة. 
بداية ستكون ملفات المجلد admin‏ كما في الصورة: 


ı library > Share with v Burn New folder 


2 


Name Date modified Type Size 

admin Y-MJ/-O/f- a «O: File folder‏ لل 

D css YAL- V-Ya-):Y) File folder 

ü menu YL- V-Y a YO File folder 

n news YH£/AV-«Y a «YT File folder 

B serv YA VAY, ۱ء‎ File folder 

"I; index Y-\5/-0/«Lp T1) PHP Script 1KB 
"login YeMSV.Ya TY PHP Script 2KB 
"7: logout YeMP/SV.Ya Y) PHP Script 1KB 
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كما في الصورة أعلاه في المجلد admin‏ وضعنا صفحات (index.php - login.php — logout.php)‏ ومهام كل صفحة كالتالي: 
صفحة index.php‏ : صفحة الدخول وسيكون فيها فورم الدخول. 
صفحة Jogin.php‏ : صفحة يتم فيها مقارنة كلمة المرور مع كلمة المرور في قاعدة البيانات بالإضافة للروابط لملفات وصفحات اضافة البيانات. 


صفحة logout.php‏ : صفحة يتم فيها تسجيل الاخروج والغاء الكوكيز وتصريح الدخول للوحة التحكم. 


index.php صفح‎ 


<html xmlns-"http://www.w3.0rg/1999/xhtml"» 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
«title»ag34,aJL5 التحكم‎ ةحول>/tit1ع<‎ 
<link href="css/admin.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div style="direction:rtl;"> 
<center> 
<21/>تسجيل الدخول<21>‎ 
«form method-"post" action-"login.php"» 
اسم المستخدم‎ 
«input type="text" name-"username" /» 
<br /» 
2432943! كلمة‎ 
«input type="password" name-"password" /» 
«br /» 
</p> 
<input type="submit" "دخول"-731116‎ /» 
</form> 
</center> 
</div> 
</body> 
</html> 


1 
2 
4 
5 
& 


یم يخ يخ نم نِم نِم يم يم 


وسيكون شكل الصفحة كما في الصورة: 


€ > GC [localhost/project/admin/ DIE + FOZ c di o = 


تسجيل الدخول 


اسح المستخدم 
كلمة المرور 


a 
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login.php صفحة‎ 


«?php 


S$con-mysqli connect ("localhost","root","","project"); 

$result = mysqli query(Scon,"SELECT * FROM admin"); 

$row = mysqli fetch array($result); 

//COMPARE THE DATA THAT ENTERED FROM THE USER.... 

if(S POST["username"]--$row['name'] && md5(S$ POST["password"]) == Srow['password'] ) 
1 


IS‏ يخم زر ظرم صن Oy‏ ل CÓ‏ قا 


//SET THE COOKIE TO THE USER NAMED ENTERED... 
setcookie("UserLoged", "YES", time () +3600); 


e‏ قم 
e o‏ 


} 
else 
1 


N 


H 
[n] 


header("Location: index.php"): 


فم مم 
ھا in‏ 


} 
mysqli_close ($con) ; 


فم 
5 ل 


2> 
<html xmins-"http://www.w3.0rg/1999/xhtml"» 
<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /» 
«link href-"css/admin.css" rel="stylesheet" type="text/css" /» 
الدخول للصقحة<21516>‎ </title> 
</head> 
<body> 
<div class="admin"> 
<div class-"b"»L.»434i1$3 <017/>مرحيا لك قي لوحة التحكم || رواد‎ 
«br /» «br /» 
«a href-"menu/index.php"»àa4$L3j!«/a» || «a href-"news/index.php"»jLl. — sVi«/a» 
«br /» 
<a href-"serv/index.php"» الختددمات‎ </a> || <a href="#"> مدراء الموقع‎ </a> 
<br /»«br /» 
<a href-"logout.php"» الخروج‎ Jeza: </a> 
</div> 
</div> 


© 


3 
3 


w €) C) (o 
Qi 40 نم نم‎ 


</body> 
وداخل الشرط‎ (if) في سطر ۷ قمنا بعمل شرط‎ (admin) عملية اتصال مع قاعدة البيانات وعملية استعلام واخراج بيانات الجدول‎ o الى‎ Y في سطر‎ 


قمنا بعمل استيراد اسم المستخدم من خلال دالة POST‏ $ وهي كما في الكود ( POST["username"]‏ _$ ) وقمنا بمقارنتها باسم المستخدم في 
قاعدة البيانات (Srow['name'])‏ ثم اضفنا شرط آخر بواسطة (و) وهي )&&( وتعني (AND)‏ . 


في قاعدة البيانات الباسورد مخزنة بشكل مشفر بواسطة الدالة (MDS)‏ الى الان لم نقم بعملية ادخال الباسورد وكلمة المرور وسنقوم بإضافتها لاحقا . 
بعد الشرط الاول نأتي للشرط الثاني نقوم بتشفير كلمة المرور التي ادخلها المستخدم ونقارنها بكلمة المرور المشفرة كما في الكود 
(md5($ POST["password"]) == $row['password'])‏ حيث الكود md5($ POST['"password"])‏ ) تقوم بتشفير كلمة المرور 
المدخلة من المستخدم ثم مقارنتها اذا كانت تساوي )==( كلمة المرور في قاعدة البيانات للمستخدم $row['password'])‏ ). 


في حالة كانت عملية الادخال ووافق الشرط وكانت كلمة المرور واسم المستخدم موجود في قاعدة البيانات سيتم الدخول في سطر ٠١‏ وهو القيام بتعيين 
كوكيز وبنفس الطريقة التي تعلمناها مسبقا والاستمرار في الكود وظهور روابط صفحات الادخال. في حالة عدم التوافق مع الشرط يتم الدخول للسطر 
١ f‏ وسيتم توجيهه مرة اخرى لتسجيل الدخول في صفحة (index.php)‏ 
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logout.php صفحة‎ 


«?php 
setcookie('UserLoged','NO',time() - 3600); 
header("Location: index.php"); 

?» 

<html xmins-"http://www.w3.0rg/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<link href="css/admin.css" rel="stylesheet" type="text/css" /> 

<title>gjjä Jl تسجيل‎ p3</title> 

</head> 

<body> 

</body> 

</html> 


1 
3 
- 
5 
6 


كما في الصورة أعلاه في (logout.php) aia‏ يتم تسجيل الخروج عن طريقها وكما نلاحظ في سطر Y‏ الغاء الكوكيز والتي تعلمناها مسبقا. 


اضافة مستخدم وتشفير كلمة المرور 


من خلال phpmyadmin‏ ندخل لقاعدة البيانات التي نعمل project ale‏ ثم الدخول للجدول admin‏ كما في الصورة: 


€ > © Û localhost/phpmyadmin/index.php?token=f23470c5c6b09b6a9ca9e267ac2c307f#PMAURL-4:sql.php?db=project&table=admin&: yy | a" d 


phpMyAdmin cf localhost » B project » B admin 
^ al 3 © © © E| Browse W Structure [) SQL ذا‎ Search 6 Insert à Export E} Import g Operations | 3& Triggers 
| (Recent tables) ... M | 


filter databases by name X | 


<<<|2 v| FROM ` admin’ 
- p SER LIMIT 0 , 30 
(Fg joomla 
و‎ lo Û Profiling [ Inline ] ] Edit ] [Exp 
EH 3 login2 
go", 
او باللغة العربية (ادخال) وسيتم الادخال كما في الصورة:‎ (insert) من خلال الصورة أعلاه نقوم بالضغط على‎ 
phpMyAdmin ES localhost » ® project » E admin 
^ al 3 © û) € E] Browse  # Structure | |j] SQL | 4 Search Fé Insert | كنا‎ Export E} Import g Operations 35 Triggers 
| (Recent tables) ... d Column Type Function Null Value 
id int(3) | 3 | 
L 
filter databases by name X name varchar(88) | . | ETE 
<<< | 2 | 2 
grain ether j 
Sa lo E 
a 8 E 
وض‎ login2 ود‎ 
E 3 lol سا‎ 


من خلال الصورة أعلاه قمنا بإضافة اسم المستخدم او مدير الموقع كما في الصورة (admin)‏ ثم اضافة كلمة المرور (Y Y Y)‏ ولكن Bay‏ قمنا باختيار 
نوعها (MDS)‏ وسيتم تحويل كلمة المرور (Y Y)‏ الى كلمة مشفرة في قاعدة البيانات › بعد القيام بضغط الزر (Go)‏ يتم التنفيذ وسيكون شكل اسم 
المستخدم وكلمة المرور كما في الصورة: 
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* Options 
-T> v id name password 


2 Edit zt Copy @ Delete 1 admin |202cb962ac59075b964b07152d234b70 


t Check All With selected: p Change @ Delete [a Export 


Show : Start row: |0 Number of rows: | 30 Headers every | 100 rows 


كما نلاحظ في الصورة أعلاه تم تشفير كلمة المرور وظهرت كما في الصورة في العمود (password)‏ 


نقوم الان بتجربة الدخول بكلمة مرور خاطئة وكلمة مرور صحيحة. بعد التجربة Badiu‏ عدم ادخالنا للوحة التحكم بإدخال كلمة مرور خاطئة وعند 
ادخال الكمة مرور صحيحة سيتم اظهار روابط صفحات الادخال كما في الصورة: 


[3 localhost/project/admin/login.php ze 3 


مرحيا لك قى لوحة التحكم || رواد التكنولوجيا 


القائمة || L.— 5I‏ 
الخدمات_| | مدراء الموقع 


zal , Locus 


الى هنا قمنا بعمل تأمين للوحة التحكم الرئيسية اعلاهء نأتي الان الى تأمين جميع الصفحات في المجلدات الموجودة ضمن المجلد (admin)‏ ونعني بذلك 
صفحات الادخال والاخراج والتعديل والحذف لكل المجلدات (القائمة - الخدمات — الأخبار ). 


سيتم اضافة كود الكوكيز لجميع الصفحات كما في الصورة : 


«?php 

if(S COOKIE['UserLoged']!-'YES')( 
header ("location:../index.php"): 
) 


كما نلاحظ اعلاه قمنا بإضافة كود الكوكيز لاحد صفحات الادخال وذلك في الاسطر الأولى وهو عبارة عن شرط والذي يعني في حالة كانت قيمة الكوكيز 
الذي اسميناه (UserLoged)‏ لا تساوي (YES)‏ يتم التوجه مباشرة الى صفحة الدخول (index.php)‏ الموجودة ضمن المجلد .admin‏ ولابد من 
اضافة هذا الكود لجميع الصفحات حتى تكون محمية ولا يتم الوصول لها الا اذا كان المستخدم قد ادخال كلمة المرور كاملة. 


ننتقل الآن لتجهيز الصفحة الرئيسية للموقع والخطوة الآن ملئ الجداول بالبيانات وبعدها سنقوم بالخطوة التالية وهي باستيراد البيانات من قاعدة 
البيانات الى الصفحة الرئيسية بشكل ديناميكي. نقوم الآن بملئ الجدول الخاص بالخدمات (serv)‏ والجزء الذي سيقوم بعرض هذه الخدمات هو كما في 
الصورة : 


MOBILE: 00967 714490030 T 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


من ضمن خدمات رواد التكنولوجيا صيانة 
الحاسوب وتركيب الشبكات للمؤسسات 
والمراكز بمختلف توجهاتها من ضمن 
خدمات رواد التكنولوجيا 


تقاصيل أكثر. 


قسم تصميم الجرافكس 


تصاميم رواد التكتولوجيا قسم تصميم 
الجرافكس قسم تصميم الجراقكکس 
الجرافكس قسم تصميم الجرافكس 
قسم تصميم الجرافكس قسم تصميم 


تصميم وإستضافة مواقع إلكترونية 


تصميم واستضافة مواقع الكترونية 
وتركيب انظمة ادارة محتوى تصميم 
واستضافة مواقع الكترونية وتركيب انظمة 
ادارة محتوى تصميم واستضافة مواقع 


سنجعل الجزء أعلاه يستورد البيانات من الجدول serv‏ وهنا لابد ان تكون الخدمات الرئيسية Y‏ فقط حسب بنائنا للموقع وتخطيطنا المسبق بالإضافة 
للصور ويتم الغاء الصور اعلاه والبيانات لأنها افتراضية الى ان يتم الربط مع قاعدة البيانات. وبعد ملئ الجدول serv‏ بالبيانات والصور ستظهر 


البيانات التي في الصورة: 


€ > Q D |localhost/project/admin/serv/ 


DEAE M © 2 E غات‎ = 


اضاقة جديد 

بكاوم تقوم رواد التكنولوجيا بتصميم المواقع الالكترونية الرسمية بأتواعها سواء كانت تجارية أو مؤسسات تعديل 
ا خدمية أو حكومية او منظمات أهلية ومجتمعية وفقا لأحدث التصاميم العالمية والأنيقة. واستضا@ | حذف 
جرافكس من الخدمات الراقية والجميلة التي نقدمها تصاميم لجمبع وسائل الدعاية والإعلان,فريق محترف تعديل 
وتصاميم وخيرة äle‏ قى التصاميم الورقية والمطبوعات بانوعها بالاضافة إلى ذوق التصميم الجميلة والجذابة | حذف 
o‏ ي نصمم شيكات بأحدت التقنيات وبكل احترافية ونقدم خدمات الصيانة للحاسبات والشيكات بأنواعها pas;‏ 
s‏ © للمؤسسات والشركات والأشخاص. | حذف 


نربط الجدول الخاص بالخدمات مع الجزء الذي حددناه مسبقا وهو الجزء الموجود في index.php‏ الرئيسية وسنقوم بعمل استيراد البيانات المطلوبة 


الى هذا الجزء بشكل أتوماتيكي. 


سنحذف ۲ من الأجزاء ونكتفي بواحد فقط ونجعله ضمن الدالة while‏ وسيتكرر بعدد الخدمات التي قدمناها وهي Y‏ خدمات ويجب ان لا تزيد عن Y‏ 
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وسيكون شكل الكود بعد الحذف للجزئين كما في الصورة: 
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ل 


«div class-"grid s" id-"grid"» 
Xh3» Li3Laaus«/h3» 
«div class-"grid" » 
«div class-"gallery"» 
«a href-"web/images/grids-img4.jpg"»«img src-"web/images/grids-img4.jpg" title-"image-name"»«/a» 
«/div» 
<23/>صياتة حاسوب وتركيب شبكات<23>‎ 
«div class-"grid p"» 
<p> 
من ضهن خدمات رواد التكتولوجيا صياتة الحاسوب وتركيب الشبكات للمؤسسات والمراكز يمختلف توجهاتها‎ 
من ضهن خدمات رواد التكتولوجيا‎ 
</p> 
<a class="button bg2 grid btn" href-"details.html"»,1i*| تقاصيل‎ ..>/2< 
«/div» 
«/div» 


oO Oo © 


لك 
© مات 


لك ل 


]2 
فر QU IN‏ شر كن 


5 لك 


لب 
5 


م 


ب -J‏ © م ممع 


CO‏ م م م 


«br /» 
«/div» 


<-- نهاية محتوى الموقع C!-—‏ 


ت دز QN‏ ظر الى 6١‏ ل 66 iQ‏ 


تن م م 


Bay‏ من سطر VY‏ هو الجزء الذي سنعمل عليه. وسنبدأ بعمل اتصال لقاعدة البيانات ثم الاستعلام وبعده ننتقل لاستبدال العناصر او العناوين التجريبية 
فمثلا في سطر۷۳ هذا رابط للصورة التجريبية سيتم حذفه كاملا واستبداله بكود استيراد الصورة من قاعدة البيانات(ع121): ايضا في سطر vo‏ 
سنستبدل العنوان بعنوان الخدمة من قاعدة البيانات (head)‏ »ما بين السطرين VV‏ و Ae‏ سنضع كود استدعاء التفاصيل (det)‏ سطر ۸١‏ (تفاصيل 
أكثر) سنعمل عليه لاحقا. في نهاية التعديل والاستبدال ووضع الكود المناسب سيكون شكل الكود كما في الصورة: 


43L3-108 93a‏ ف المحتوى 


<23/>خدماتتا<23> 


<?php include ("config.php"); 
S$result-mysql query("SELECT * FROM serv ORDER BY id ASC"); 


?» 
«table style-"width:400px; margin:O0 auto;"- 
«tr» 
<?php while ($row = mysql fetch array(S$result))t ?» 
«td» 
«div class-"grid"» 
«div class-"gallery"» 
«?php echo "«img src-imgs/".Srow['img']; ?» 
«/div» 
€Xh3»«?php echo $row['head']; ?»«/h3» 
3 «div class-"grid p"» 
3 «p» 
55 <?php echo Srow['det']; ?» 
56 «/p» 
57 «a class-"button bg2 grid btn" href-"details.html"»,:«i تقاصيل‎ .</a> 
58 «/div» 
59 «/div» 
60 
61 «/td» 
62 
63 «?php ) ?» 
[EE </tr></table> 
تك‎ </div> 
تك‎ <br /»«br /» 
67 >!-- تهاية مفختوى الموقع‎ ——» 


لا جديد في الكود سوى دمجه مع كود htm]‏ في سطر ١‏ ؛ كود الاتصال بقاعدة البيانات. في سطر ٠١‏ كود الاستعلام للجدول الذي نريد عرض بياناته › 
أغلقنا الكود في ”4. في سطر ££ بدأنا عمل جدول والغرض منه لجعل اجزاء عرض البيانات تظهر بشكل أفقي كل جزء داخل خليه (td)‏ ضمن الجدول 
ايضا قمنا بعمل ستايل مختصر بدون كلاس لتحديد المساحة الجانبية (margin)‏ من الجوانب تكون اتوماتيكية ومن الأعلى والاسفل تكون صفر 
بالإضافة إلى العرض تم تحديد ٠٠٠١‏ بكسل. 
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انا 


في سطره ؛ بدأنا بعمل صف» سطر ٠١‏ فتحنا كود وقمنا بكتابة الدالة while‏ واستدعينا الاستعلام الى داخل المتغير row‏ واغلقنا الكود ايضا في نفس 
السطرء في سطر £V‏ بدأنا عمل خلية» سطر £A.‏ بدأنا بعمل الكلاس 


تصاميم مواقه الكترونية 
تصاميم مواقع الكترونية 


الالكترونية الرسمية بأنواعها deas‏ كانت 
تجارية أو مؤسسات خدمية أو حكومية او 
hi‏ منظمات أهلية ومجتمعية وفقا لأحدث 


من الخدمات الراقية والجميلة التي نقدمها 
تصاميم لجمبع وسائل الدعاية 


والإعلات,فريق محترق وخيرة عالية في 
التصاميم الورقية والمطبوعات بأنوعها 
بالاضافة إلى ذوق التصميم الجميلة 
والجذاية 


وسيكون شكل الموقع كما في الصورة: 


سنقوم بعمل اضافة جديد للبيانات أعلاه وهو القيام بعمل Alla‏ تقوم باستيراد جزء من التفاصيل فقط وليس كلها وذلك عن طريق دالة substr()‏ 


وصورتها العامة: 


substr (text,number,number2) 


والصورة العامة توضح ان هذه الدالة تقوم بعملية اخراج عدد معين من الو)ط أو الحروف حيث يرمز text‏ الى المتغير الذي يحمل النص الذي نريد 
تحديد مقدار ما يظهر number.Aia‏ ويشير الى رقم الحرف في النص الذي number2 «ia lada‏ هو عدد الو)ؤم المسموحة او التي نريدها. 
وسنقوم بتركيب الكود في السطر الخاص بالتفاصيل det‏ كما في الصورة: 
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<3ط/>خدماتتا<23> 39 

40 

41 <?php include ("config.php"); 

42 $result=mysql_query ("SELECT * FROM serv ORDER BY id ASC"); 
43 ?» 

44 «table style-"width:400px; margin:O0 auto;"» 

45 <tr> 

46 <?php while ($row = mysql fetch array(Sresult))( ?> 

4] «td» 


0 


<?php Stext-S$row['det'];?» 


[ 


50 


2 


<div class-"grid"» 


5 <div class="gallery"> 

52 <?php echo "<img src-imgs/".Srow['img']; ?> 
53 </div> 

54 <h3><?php echo Srow['head']; ?></h3> 

55 «div class-"grid p"» 

56 «p» 

57 <?php echo substr(Stext,0,222).".."; ?» 

58 </p> 

59 <a class="button bg2 grid btn" href-"details.html"»,:«| da Lài:..«/a» 
60 </div> 

61 </div> 

62 

63 </td> 

64 

65 <?php } ?> 

66 </tr></table> 

67 </div> 

LEE <br /»«br /> 

EEMEME <! -- الموقع‎ Gu تهاية‎ --< 


الزيادة التي قمنا بعملها أو تعديلها هي سطرين فقط في £A dau‏ اضفنا كود وعرفنا متغير جديد)×م)$ ووضعنا بداخله بيانات التفاصيل(166). وسيتم 
وضع البيانات فيها في كل مرة لكل سجل. في سطر o V‏ قمنا بتطبيق الدالة substr()‏ وادخلنا المتغير الذي سيحوي النص او التفاصيل $text‏ ثم حددنا 
صفر وهو ان يبدأ من الصفر ثم حدد Y Y Y‏ بت مقدار ما سيقوم بإخراجه من البيانات الخاص بالتفاصيل وأما النقطتين التي بين علامتي التنصيص نشير 
الى ان هناك تفاصيل اخرى. وسيكون شكله بعد التطبيق كما في الصورة: 


جرافكس وتصاميم تصاميم مواقع الكترونية 


من الخدمات الراقية والجميلة التي نقدمها تقوم رواد التكنولوجيا بتصميم المواقع 
احترافية وتقدم خدمات الصيانة للحاسيات تصاميم لجمبع وسائل الدعاية الالكترونية الرسمية بأنواعها سواء كانت 
— والشبكات بأنواعها للمؤسسات والشركات والإعلان,فريق ymo‏ وخيرة عالية في تجارية أو مؤسسات خدمية أو حكومية او 
والأشخاص... التصاميم الورقية و.. oks‏ 


قن oda‏ الخطوة تقوم يعمل اللازع dej‏ الأزرق وهي Jani ae‏ عليه سيقو Qa ja‏ التفاضيل ALIS‏ رهي C gall‏ والتفاضيل وسيكرجب Je Uie.‏ 
فحة تقوم بهذه الوظيفة وسنقوم بعملها وسنسميها det, serv.php‏ داخل المجلد العام وهو اسم مختصر لتفاصيل الخدمات. وسيكون الكود الخاص 
بها كما في الصورة: 
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<?php include('indexi.php'); ?» 
«div class-"content"» 


Liac/div»‏ العتوان<017> 
Lia«/div»‏ التقاصيل<037> 


6 


</div> 


من م ) 


«?php include('index2.php'); ?» 


H 


فم 


فر 


كما نلاحظ أعلاه سطر ١‏ استدعينا الجزء الأول من الموقع في سطر ۳ قمنا بعمل ديف واستدعينا الكلاس content‏ والسطر 5-5 قمنا بعمل ؟"ديفات 
للعنوان والتفاصيل في سطر ٠١‏ استدعينا الجزء السفلي للموقع. وسيكون الشكل كما في الصورة: 


.head( 
direction:rtl; 
color:#fff; 
font-family:"Times New Roman", Times, serif; 
font-size:20px; 
font-weight:bold; 
padding:19px 11px 11px 11px; 
text-shadow: 1px 1px #000; 
background-color: #F93; 
margin:0 auto; 
margin-top: Spx; 
border:solid #fff 1px; 
border-radius: 4px 4px 4px 4px; 
width:94$;) 


.det( 
direction:rt1l; 
color:#fff; 
font-family:"Times New Roman", Times, serif; 
2025-5126 : 
font-weight:bold; 
padding:19px 11px 11px 11px; 
text-shadow: 1px 1px #000; 
margin:O auto; 
margin-top:5px; 
border:solid £fff 1px; 
border-radius: 4px 4px 4px 4px; 
width: 94%;} 


H 
O 0ا‎ !O O 
OY n e 


فم فم ف 


وبعد الاستدعاء للكلاسات وربطها سيكون شكل الصفحة كما في الصورة: 
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Yo 


نقوم الان بعمل الكود اللازم في رابط (تفاصيل أكثر) في صفحة Index.php‏ ونربطه بالصفحة det, serv.php‏ كما في الصورة : 


57 <?php echo substr(Stext,0,222).".."; ?» 

58 «/p» 

59 «?php echo "«a href-'det serv.php?id-$row[id]' class-'button bg2 grid btn'»;isi "<ه/>. . تقاصيل‎ ?» 
60 </div> 

61 «/div» 


كما نلاحظ تم ربط الرابط بالصفحة det, serv.php‏ وسيتم ارسال ال10 الخاص بأي خدمة للصفحة det, serv.php‏ والتي تقوم بدورها بأخذ الرقم 
والاستعلام عن الخدمة التي طلبنا التفاصيل عنها واخراجها من قاعدة البيانات وعرضها كاملة. ونأتي الآن لعمل الكود اللازم لذلك. 


سيكون شكل الكود في det, serv.php‏ كما في الصورة: 


«?php include('indexl.php'); ?» 


«div class-"content"» 
<?php 
include ("config.php"); 


$id = $ GET[ 1 
//updating the table 


فم IN)‏ یں کر صن Oy‏ ل CD‏ 


ما 


S$result-mysql query ("select * from serv where id-$id"); 


«div class-"head"»«?php echo $Shead; ?»«/div» 
«div class-"det"»«?php echo Sdet ; ?»«/div» 


0 
1:3! 
2 while(Srow-mysql fetch array(Sresult)) 
3 1 
4 S$head = Srow['head']:; 
5 Sdet = Srow['det']: 
6 ) 
7 ?» 
9 


«/div» 


هم فم قم فر در قم P p‏ يم NNN‏ 


O‏ کر یم ين 


<?php include('index2.php'); ?» 


بعد الضغط على اي من (تفاصيل أكثر..) الخاص بالخدمات ستظهر كما في الصورة: 


echwvwology 


الرئيسية 


جرافکس وتصاميم 


زی ا ات الراك را گے ال ]0 Er‏ اا لے ر اتل الاحاياة ر ال حا رر تر ررر ار فى الا الررقة راک ر ات dh‏ حرا esae fh‏ دزی 
السك EE‏ 


لم نقم بعمل استيراد للصورة ويمكننا اذا اردنا ذلك بعمل ديف خاص بها وبنفس الية العنوان والتفاصيل مع زيادة امتداد الصورة او مكانها في المجلد 
(imgs/)‏ بدون سلاش ونقطتين بخلاف السابق لأن الصفحة والمجلد في نفس المكان. 


ننتقل الآن إلى القائمة وجعلها تستورد البيانات من قاعدة البيانات وبنفس طريقة الخدمات بفارق بسيط c‏ سيكون التعديل على صفحة indexl.php‏ 
واي توجد (di‏ القائنة p ditas‏ بام عام الكدوق :الخاض Alis Ail‏ بالصقتطة واكام Dd. (Rei)‏ كل شيع تقوم يمان Laits‏ 
حسب القائمة الموجودة مسبقا لدينا وبالترتيب كما في الصورة: 
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21 القاكعة--!»‎ ialis Lia--» 

22 <?php include ("config.php"); 

23 $result=mysql_query ("SELECT * FROM menu ORDER BY id ASC"); 
24 ?» 

25 

26 

27 «div class-"menu"» 

28 «ul» 

FE <li><a href-"index.php"»ai.a.5,3!«/a»«/1i» 

30 

33 <?php while ($row = mysql fetch array ($result)){ ?» 

32 

33 <li><a href-""»«?php echo $row['head']; ?»«/a»«/li» 
34 

35 <?php ) ?» 

36 

37 «/ul» 

38 «/div» 

39 €«!--à4a45Là33J| Lyga Lia--» 


في سطر 74-775 قمنا بعمل اتصال واستيراد لجدول القائمة من قاعدة البيانات »سطر Y Y‏ وبعد الرئيسية قمنا بعمل دالة while‏ وستقوم بسرد جميع 
العناوين للقائمة (head)‏ . سطر YY‏ حذفنا جميع العناصر في القائمة باستثناء أحدها واستبدلنا العنوان بكود اخراج للعناوين وستقوم الدالة while‏ 
بذلك وتمر على جميع العناوين للقائمة حسب السطر YY‏ ونلاحظ عدم وجود رابط وهنا نقوم بعمل اللازم لذلك ونريد صفحة للتفاصيل خاصة بالقائمة 
كي نقوم بتحويل المتصفح بعد الضغط على اي عنوان للقائمة. سنسمي الصفحة det. menu.php‏ وهي اختصار لتفاصيل القائمة. وهي مشابهة تماما 
لصفحة det, serv.php‏ مع تعديل بسيط وسيكون الكود الخاص بها كما في الصورة: 


: det, menu.php صفحة‎ 


<?php include('indexl.php'); ?» 


«div class-"content"» 
«?php 
include ("config.php"); 


غم نزخ 0( كير Qi‏ ئ ل 


Sid = S GET['id']; 
//updating the table 


تت ف 


© 


Şresult=mysql_query ("SELECT * FROM menu where id-Sid"); 


he‏ يم 


while(Srow-mysql fetch array($result)) 
1 

Shnead = Srow['head']:; 

Sdet = Srow['det']; 


in e C 


) 

?» 

«div class-"head"»«?php echo Shead; ?»«/div» 
<div class-"det"»«?php echo Sdet ; ?»«/div» 


لك هم 


O i 


«/div» 


1 
1 
1 
1 
1 
1 
16 
17 
1 
1 
2 
2 


w N هم‎ 


<?php include('index2.php'); ?> 


كما نلاحظ نفس التشابه تم تعديل فقط اسم الجدول إلى menu‏ في سطر .٠١‏ نقوم الان بالرجوع الى روابط القوائم ونقوم بإضافة الرابط لكل عنصر في 
القائمة حسب الكود: 
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include ( ): 
Sresult-mysql query( is 


Qo QN ر‎ 


N N N N N N 


nm 


<div class-"menu"» 
<ul> 
<li><a href-"index.php"»i.4.5,]!«/a»«/li» 


iD C 


|o 


while ($row = mysql fetch array(Sresult))( 


2 
3 
3 


33 >11< echo echo $row Pj «/a»«/li» 
34 

35 ) 

36 

7 «/ul» 


«/div» 


€) w CO 


iD o 


وسيكون شكل القائمة كما في الصورة : 


ننتقل للجزء السفلي والموجود فيه (آخر الأخبار) كما في الصورة : 


JI رواد‎ 


الموا 


en yusuf&yahoo.com : 
7144900 
الا‎ L 


رمضان الميارك 


www.techpio.net 


سنقوم أولا بملئ الجدول news‏ بالأخبار كما في الصورة : 


= د & 2 5 ج 2 GCG [localhost/project/admin/news/ Y? 3A‏ > € 
اضاقة جديد 
العتوان التاريخ تفاصیل تعديل 
NEN : 5‏ أقام رواد التكنولوجيا دروة تدريبية في مجال تصميم المواقع الالكترونية واستضافتها لمجموعة تعديل 
puli Nagios‏ 885 تدريبية MA‏ من المتدرزين في pis a.u ico‏ كل Jaa cite.‏ مخ aco;‏ الخاض وقضك مكاررك وم düx|‏ 
رواد التكنولوجيا تفتتح قسم تصاميم 2014/05/02 تعتزم رواد التكنولوجيا افتتاح قسم تصاميم الجرافكس والذي يقوم بتنفيذ gno‏ المهام تعديل 
الجرافكس في نهاية مايو الحالي المتخصصة فى التصاميم والطباعة. | حذق 
"n : :‏ أقام رواد التكنولوجيا دروة تدريبية في مجال تصميم المواقع الالكترونية واستضافتها لمجموعة Lag‏ 
ANE DIN ING‏ جورة ING‏ 2 من المتدربين في مجال الويب. وقام كل متدرب بعمل مشروعه الخاص. rem‏ 
رواد التكنولوجيا تفتتح قسم تصاميم 2014/05/02 تعتزم رواد التكنولوجيا افتتاح قسم تصاميم الجرافكس والذي يقوم بتنفيذ جمبع المهام تعديل 
الجرافكس فى نهاية مايو الحالي المتخصصة فى التصاميم والطباعة. | حذق 
رواد التكتولوجيا تهنئ الأمة العربية 4/05/02 ومد رواد التكنولوجيا تهنئ الأمة العربية والاسلامية بمناسبة شهر رمضان المبارك, اعاده الله علينا تعديل 
والاسلامية بمناسية شهر رمضان المبارك ولكم باليمن واليركات. | حذق 
عرض خاص من رواد التكتولوجيا 2 عرض خاص من رواد التكنولوجيا , عرض خاص من رواد التكنولوجياعرض خاص من رواد التكنولوجيا Eos‏ 


سنعدل الان على الصفحة index2.php‏ ونقوم باستيراد الجدول (الأخبار) من قاعدة البيانات كما في الصورة: 


«div class-"news"» 
«div class-"headline"»j آخر | لأخحبا‎ >/01+< 


<?php include ("config.php"); 
$result-mysql query("SELECT * FROM news ORDER BY id DES"); 
?» 
«ul» 
<?php while ($row = mysql fetch array(Sresult))( ?» 
«li»«a href="#"> 4.54514 JY! <3<>/11/>رواد التكتولوجيا تقتتح دورة تصهميم واسضاقة المواقع‎ 
«/ul» 


<?php ) ?» 
«/div» 


من خلال الصورة أعلاه حذفنا جميع الأخبار وابقينا على واحدة فقط. وسنستبدلها بكود لاستيراد عناوين الأخبار ولكن هنا فقط نريد آخر o‏ أخبار فقط 
وليس جميعها لذلك سنضيف في الاستعلام خاصية جديد وهي (limit)‏ ونضيفها في آخر الاستعلام ونحدد رقم للأخبار وسيكون الكود كما في الصورة: 
«div class-"news"»‏ 
«div class-"headline"»,L.5V| رۈZخî </div>‏ 
<?php include ("config.php");‏ 
Sresult-mysql query("SELECT * FROM news ORDER BY id DESC limit 5");‏ 
»? 
«ul»‏ 
<?php while ($row = mysql fetch array(S$result))( ?»‏ 
<li><a href="#"> <?php echo S$row['head']; ?»«/a»«/li»‏ 


<?php ) ?» 


«/ul» 
«/div» 


بعد عمل الكود اعلاه سيتم عرض الأخبار ولكن ينقص الروابط وهنا نفس الطرق السابقة نقوم بعمل صفحة خاص بتفاصيل الأخبار وستكون 


det, news.php‏ نفس الأكود السابقة في صفحات التفاصيل مع تغيير بسيط. وسيكون كود الصفحة كما في الصورة: 
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<?php include('indexl.php'); ?» 


«div class-"content"» 
<?php 
include ("config.php"); 


کر یم یں JANB‏ 


$id = $ GET['id']: 
//updating the table 


co 


م 


Sresult-mysql query("SELECT * FROM news where id-$id"); 


while(Srow-mysql fetch array(Sresult)) 
1 


0 
1 
3 


Shead = Srow['head']; 
Sdet = Srow['det']: 
$date = Srow['date']; 

) 

?» 

<div class-"head"»«?php echo Snead; ?»«/div» 

«div class-"det"» 

«?php 

echo Sdate; 

echo "<br>"; 

echo Sdet ; 

2> 


فم یم یں 5 -JoO) (i‏ 


NR‏ نَم يم يم نِم يم يم 


«/div» 


«/div» 


O io © 


Q ين‎ N دم‎ 


H 


<?php include ('index2.php'); ?> 


قمنا بإضافة التاريخ ضمن الديف الخاص بالتفاصيل بعد استدعائه من قاعدة البيانات. ونأتي لربط الصفحة مع كود الاخبار في صفحة index2.php‏ 
وسيكون الرابط كالتالي : 


«div class-"footer"» 


«div class-"news"» 
«div class-"headline"»jL.5V! آخر‎ «/div» 


€ شس ظر هن‎ IN 


E 


e 


«?php include ("config.php"); 
Sresult-mysql query ("SELECT * FROM news ORDER BY id DESC limit 5"); 
?» 


Oo iu 


«ul» 
<?php while ($row = mysql fetch array(Sresult))( ?» 


فز نِم یں كر 


<li><?php echo "<a href-'det news.php?id-$row[id]' >" ?» <?php echo Srow['head']; ?»«/a»«/li» 
<?php ) ?» 


«/ul» 
«/div» 


وسيكون شكل الأخبار كما في الصورة : 


xr. ال‎ 00101111 
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وبعد الضغط على احد عناوين الأخبار ستكون كما في الصورة : 


e> C | D localhost/project/det_news.php?id=11 ] 0 1 i ع اد‎ FOZ 5 ته‎ z 


echwvology 


آخر JAT‏ من تحن اشصل يتنا 
رواد التكنولوجيا تهتئ الأمة العربية والاسلامية يمناسية شهر رمضان الميارك 


201007 
تات‎ 73) 273351) Ut لك‎ diez اة قزر رسا السار كر‎ zr JI EE E CSI 


خلاصة حول التطبيق : 

بعد أن تم الانتهاء من الموقع سيتم رفعه على سرفر موقع رواد التكنولوجيا وتطبيق عملية الرفع 
والتركيب وما إلى ذلك. وهنا نريد الاشارة الى إلى بعض التنبيهات. تم إنشاء التطبيق الأخير للتعليم 
ويعتبر موقع بسيط ومدخل للغة php‏ لمن يريد تعلم اللغة بشكل احترافي وربما ينقص الموقع الكثير 
من الملاحظات gl‏ التعديلات التي بإمكان المتعلم ان يستفيد Gio‏ ويعدل عليه كما يريد. هذا التطبيق 
وهذا الكتاب ليس إلا مفتاح لمواصلة التعلم £lajylg‏ وليس للتقيد los‏ فيه بل بالبحث والممارسة وتعلم 
الجديد وتعلم الإخطاء وإصلاحها. 


وقد كان الغرض الرئيس هو تعلم أساسيات تصميم المواقع والانتقال لإنشاء المواقع الالكترونية بواسطة 
السكربتات وأنظمة إدارة المحتوى ويكون لدينا فكرة وخلفية حول كيفية عمل المواقع وطريقة التعامل 
معها مثل: جوملا (JOOMLA)‏ وهو ما سنتعلمه في هذه الكتاب إن cub‏ الله. 


ولرؤية التطبيق الدخول على الرابط : www.techpio.net/book‏ أو الدخول على الموقع الرئيس www.techpio.net‏ 
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رفع الموقع على السرفر وإطلاقه 

بعد الانتهاء من عمل الموقع الإلكتروني ومراجعته يتم وضعه في استضافة تقوم بتركيب الموقع عليها وهنا بعض المعلومات العامة حول الاستضافات. 
الاستضافة 

هي عملية وضع صفحات الويب على أحد السرفرات الخاصة بالإنترنت أو المتصلة بشبكة الإنترنت وبواسطة دومين يتم حجزة عن شراء استضافة 
مدفوعة او الاشتراك في استضافة مجانية. قبل عملية الاستضافة للموقع الالكتروني لابد من اختيار المؤسسة او الشركة المقدمة لهذه الخدمة بشكل 
دقيق وحسب مواصفات ومتطلبات الموقع الالكتروني الخاص بك. 

إن الاستضافة للموقع الالكتروني تلعب دور كبير في ظهور الموقع الالكتروني بالشكل المطلوب وحمايته والحفاظ على قاعدة بياناته اضافة لتوفير 
مساحات مناسبة ومقدار تناقل لا محدود للبيانات. يفضل أن من يدير الاستضافة أو يقوم بشرائها وإدارتها أن تكون لديه خلفية وفكرة حول التعامل مع 
السرفرات المستضيفة وطريقة عملهاء بالإضافة إلى قدرته على التواصل باللغة الإنجليزية مع الشركات المستضيفة. إضافة لابد من يقوم أخذ استضافة 
أن يكون له إطلاع على الاستضافة ومتابعة هذا بالنسبة لمن يعمل في المجال ولا يحبذ لمن لديه موقع ولا يعمل في المجال نفسه. 


وهنا بعض الخصائص التي تعتبر مهمة وتكون ضمن العروض الخاصة بشركات الاستضافة: 
الخاصية معناها ملاحظات 


وهي مقدار المساحة المتاحة للموقع وتحسب 


المساحة . تتوفر حاليا مساحات كبيرة ولا محدودة فى 
بالجيجا بايت أو الميجا بايت m‏ 3 
(space)‏ بعض شركات الاستضافهة 


حيث ٠٠٠١‏ ميجا بايت = ١‏ جيجا بايت 


وهي مقدار تناقل البيانات وهي شبيهة باشتراك 


مقدار تناقل البيانات الانترنت حين تستنفد مقدار البيانات الخاصة | ويفضل شراء استضافة تكون مقدار تناقل 
traffic )‏ ( بك يتم فصل اشتراك خطك. وهنا هو مقدار ما | البيانات فيها لامحدود (مفتوح) 


هو مسموح للمتصفحين لتصفح الموقع. 


عبارة عن بروتوكولات خاص بإرسال البيانات 


. : m pn . الإيميلات بالإضافة لخاصية دعم‎ ase 
عن طريق السرفرات المدفوعة ولها أهمية | يفضل شراء استضافات تدعم هذه الخواص‎ 


MEN . (POP & SMTP) 
لبعض المؤسسات التي تدعم إرسال النشرات | وتكون لامحدودة (مفتوحة الارسال)‎ 
الإلكترونية الرسمية‎ 
الدعم توفر الدعم في المؤسسة المستضيفة وحل | لابد من وجود دعم بوسائل مختلفة مثل الهاتف‎ 
المشاكل والشات والبريد الالكتروني‎ (Support) 
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vry 
بعض شركات الاستضافة المعروفة والكفؤة في مجال استضافة المواقع الالكترونية.‎ 


” 


الشركة الدولة ملاحظات 


قبل تفعيلها تحتاج لإثبات هوية ولا تسمح لك 
HOSTMONSTER‏ الولايات المتحدة الأمريكية بمزاولة عملك الا بعد ارسال صور للهوية أو 


جواز سفر وصور من البطاقة الائتمانية 


قبل تفعيلها تحتاج لإثبات هوية ولا تسمح لك 
HOSTGATOR‏ الولايات المتحدة الأمريكية بمزاولة عملك الا بعد ارسال صور للهوية أو 


جواز سفر وصور من البطاقة الائتمانية 


3 , 5 : GODADDY 
الولايات المتحدة الأمريكية لا تتطلب إثبات هوية‎ 


خطوات رفع الموقع على الاستضافة 
هنا خطوات لابد من عملها بشكل دقيق قبل الرفع وأثناء الرفع للسرفر والخطوات هي : 


نقوم بعمل قاعدة بيانات جديدة على السرفر المستضيف وحفظ كلمات المرور واسم السرفر المستضيف الخاص بقاعدة البيانات. نقوم بتصدير جداول 
قاعدة البيانات الخاصة بنا في الجهاز إلى مجلد معين في الجهاز ثم عمل استيراد للجداول لقاعدة البيانات الجديد على الاستضافة. 


رفغ جميل ملفات الموقع المضعم من الجهاق الخاض ينا إلى المكد العام انخاض بالانكضاقة أي من مج ed gall‏ العام الخاض بنا إلى المجلد العام ويا 
نضع الملفات ضمن مجلد مالم تكن لدومين آخر. ويجب ان يكون اسم الصفحة الرئيسية الخاصة بالموقع -default.php .5 index.php‏ 


نقوم بالتعديل على ملفات config.php-‏ الخاصة بالاتصال بقاعدة البيانات وتغيير بيانات الدخول السابقة بالبيانات التي حفظها في الخطوة الأولى. 


التطبيق العملي على رفع المواقع الالكترونية. 


من خلال التطبيق الخاص بنا سنقوم بعملية رفع الموقع كاملا واطلاقه والخطوات كالتالي: 


نقوم بعمل قاعدة بيانات في الاستضافة (تختلف الطريقة والواجهة من استضافة إلى اخرى ) ومن خلال الاستضافة الخاصة بنا نقوم بالدخول على لوحة 
التحكم ثم الضغط على زر «MySQL DB Wizard)‏ 
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MySQLO MySQL® phpMyAdmin Remote MySQL Reset PostgreSQLPostgreSQLphpPgAdmin Remote 
DB MySQL 


Databases Usage MySQL Databases DB Wizard PostgreSQL 
Wizard Pswrd 


ستظهر الصفحة التالية : 


MySQLO Database Wizard 


MySQL Databases allow you to store lots of information in an easy to access manner. The databases themselves are not easily read by 
humans. MySQL databases are required by many web applications including some bulletin boards, content management systems, and 
others. To use a database, you'll need to create it. Only MySQL Users (different than mail or other users) that have privileges to access a 
database can read from or write to that database. 


Step 1: Create A Database 


New Database. — —— i 
Next Step 


نقوم بعمل الاسم في الحقل أعلاه ثم الزر الأخضر (Next Step)‏ وستظهر الصفحة التالية ; 


Added the database S ج09‎ 


Step 2: Create Database Users: 
Username: tet | project [v] 


Note: seven characters max 


Password: | «s [7] 


s0. | 


Password (Again): 


o 
strength (wy?) BESET 


في الحقل الاول نضع الاسم المناسب لقاعدة البيانات والحقلين التاليين لكلمة المرور ثم الزر الأخضر (Create User)‏ وستظهر الصفحة التالية : 
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Added user "v s*' with password ds cw. 
Step 3: Add User to the Database 


User. زه‎ eet 
Database: يزه‎ 


2 w 
v 
e ب‎ RY 
2 ie 
* e 
[A w 
* w 
ك ك‎ 
* ie 


من خلال الصورة أعلاه نقوم بالتأشير على المربع الأعلى وتأشير علامة الصح على الكل. ثم (Next Step)‏ وستظهر الصفحة التالية وهي الأهم 
وتحمل كلمة المرور واسم المستخدم واسم قاعدة البيانات ثم الضغط على الخطوة التالية وستظهر الصفحة التالية وتعني الانتهاء من عمل قاعدة 
البيانات. 


lome لجنا‎ | Domains | Addons | account سس سس‎ cae [O | 


cPanel Email Website FTP Databases Manage IPs 


E B m د‎ i 8 H 


MySQLO Database Wizard 


Step 4: Complete the task 


User "fgintlor project" was added to the database "fgintlor projectphp". 


Add another database. 


Add another user for your MySQL database. 


Return Home 
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نقوم بتصدير قاعدة البيانات الخاصة بنا وهي بالدخول إلى localhost!‏ في السرفر المحلي الذي نعمل عليه ثم إلى phpmyadmin‏ وستظهر 
الصفحة التالية : 


| محركات‎ (di | سيل تتاني | || إستنساخ | ]$5 متقيرات | ك ميموعات المحارف‎ [uj | [ج] استيراد | عى الإعدادات‎ 0e [pO | المستخدمون‎ az] | ي الحالة‎ | SQL [E] | قاعدة بيانات‎ (uj 


E Database server General Settings 


مق تغيير كلمة السر e‏ خانم: localhost via TCP/IP‏ 

Server type: MySQL 

(log - MySQL Community Server (GPL-5.6.12 إصدارة المزود:‎ 
10 تسخة البروتوكول:‎ 

root@localhost المستخدم:‎ 

Server charset: UTF-8 Unicode (utf8) 


خادم الو يب | 


Apache/2.4.4 (Win64) PHP/5.4.12. e 


Database client version: libmysql - mysqlnd 5.0.10 - 20111026 - ٠ 
$ Sid: e707c415db32080b3752b232487a435ee0372157 


(9 PHP extension: mysqli ٠ 


phpMyAdmin 


Version information: 4.0.4 e 

مستتدات وتائقية 

ويكى 

الصقحة الرئيسية الرسمية ل phpMyAdmin‏ 
مشاركه 

اجلب دعم 

قائمة التعديلات 


utf8 general ci M | : @ Server connection collation 5 


Appearance Settings 


Arabic M‏ - العربية 


Jes -Language © : & 


| pmahomme v | مظير:‎ 49 


|v 82% 


hall حجم‎ o 


More settings g 


نقوم بالضغط على (قاعدة بيانات) وستظهر جميع قواعد البيانات ونقوم بعمل كليك على قاعدة البيانات الخاصة بنا وهي project‏ وستظهر كما في 
الصورة: 


Jf i, localhost / localhost / pro x 


e> CD localhost/phpmyadmin/index.php?token=d4340c974e89ef9f4df17ee9c1b733ef#PMAURL-2:db_structure.php?db=project&table=&se Yy | A d 


project © « localhost Î] 
Triggers 3& | sai )© | Routines gf | الإمتيازات‎ aj | عمليات‎ Gg? | استيراد‎ EQ | إيحث | 3( استعلام يواسطة مثال | 4] تصدير‎ à | SQL] | بتاء‎ gé 


الجدول a‏ العملية صقوق_ Collation £5 Q‏ الحجم الحمل الزائد 
admin |j‏ [5] استعراض qe‏ بتاء ‏ إيحت 6 إدخال م إفراغ Q‏ سقط ~0 utf8_general_ci InnoDB‏ 16 كينلويايت = 
menu |j‏ استعراض EAD‏ ف إبحت 3 إدخال م إفراغ © سقط ~5 assis 16  utf8 general ci InnoDB‏ - 
EE IN PESE news O‏ إبحت غب إبخال م إفراغ © سقط ~6 assis 16 — utf8 general ci. InnoDB‏ - 
sev Û‏ استعراض تی بتاء ى إيحت بج إبخال م إفراغ © سقط ~2 utf8_general_ci InnoDB‏ 16 کیئویایت = 


mei‏ . المجموع 13 utf8 general ci InnoDB‏ 64 كيلوبايت 0 بايت 
T‏ _ ® تحديد الكل | مع المحدد: 


الاسم: | عدد العواميد: 
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من خلال الصورة أعلاه نقوم بالتأشير على مربع (تحديد الكل) واختيار من الخيارات الموجودة في (مع المحدد) نختار (تصدير) كما في الصورة التالية: 


project © « localhost Eî] 


8 يناء | ][ SQL‏ @ إيحت | )3( استعلام يواسطة مثال [jo‏ تصدير | E)‏ استيراد | e‏ عمليات | aj‏ الإمتيازات | 4 Triggers 36 | sai © Routines‏ 
العملية صقوقت O‏ توع Collation‏ الحجم الحمل الزاند 


تسخ الجدول مع البادئة 


3 


بعد اختيار تصدير ستظهر الصفحة التالية : 


€ > C |[localhost/phpmyadmin/index php?token-d4340c974e89ef9fAdf17ee9c1b733ef&PMAURL-2:db structure.php?db-project&table-&sevv| a d 


project © « localhost f] 


Triggers 3& sai (S Routines gç | الإمتيازات‎ aj | تصدير | إإإ استيراد هى عمليات‎ [jo استعلام يواسطة مثال‎ (j | ذا إيحث‎ SQL] | يناء‎ A 
"project" تصدير الجداول من قاعدة المعطيات‎ 


متهج التصدير: 


Quick - display only the minimal options © 


Custom - display all possible options © 


Open 
Always open files of this type 


Show in folder 


Cancel 


L] Project (2).sql 5 


من خلال الصورة أعلاه نقوم بالضغط على زر (إنطلق) وسيتم تنزيل الجداول مباشرة كما يظهر في الجزء السفلي على اليسار من خلال السهم الأيمن 
نضغط عليه ثم نختار show in folder‏ (عرض في المجلد) هذا لمستخدمي جوجل كروم ثم نأخذ قاعدة البيانات ونضعها في اي مكان نريده ونحدده. 
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نأتي الان إلى رفع الجداول إلى قاعدة البيانات الجديدة على السرفر وهي عن طريق الدخول على لوحة التحكم ثم الذهاب الى زر usphpmyadmin‏ 


في الصورة : 


+ +k me" c 
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MySQLO MySQL® phpMyAdmin Remote MySQL Reset — PostgreSQLPostgreSQLphpPgAdmin Remote 
Databases DB MySQL Usage MySQL Databases DB Wizard PostgreSQL 


Wizard Pswrd 


نقوم بتسجل الدخول عن طريق الصفحة التالية باسم المستخدم وكلمة المرور الخاصة بقاعدة البيانات التي أنشأناها كما في الصورة : 


phpMyAdmin 
^ 12 © 5( © 


No tables found in database. 


(O Create table 


phpMyAdmin 
Welcome to phpMyAdmin 
TL Language | 
| English "| 
| Login © | 
CIR m— ! 
Password: m 


Reset Password 


بعد الدخول الى قاعدة البيانات تضغط على زر import‏ أو استيراد باللغة العربية كما في الصورة: 


localhost ^ 


[j Databases  [.] SQL Ñ Status | 3 Export Ej Import & Settings — M2 Synchronize $>) Variables ^ E Charsets [$ Engines 


Importing into the current server 


File to Import: 


File may be compressed (gzip, bzip2, zip) or uncompressed. 
A compressed file's name must end in .[format].[compression]. Example: .sql.zip 


© Browse your computer: | Choose File | No file chosen (Max: 50MiB) 


© Select from the web server upload directory /home/fgintlor pr/tmp/: 


من خلال الصورة أعلاه نقوم بالضغط على زر Choose File‏ أو اختيار ملف باللغة العربية والذهاب لمكان الجداول التي في جهازنا واختيارها ثم 
الضغط على زر (انطلق) أو (تنفيذ) اسفل الصفحة السابقة وسيتم رفع الملف واعطائك رسالة نجاح بإتمام الرفع كما في الصورة التالية: 
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ااا ا حر 


® ا‎ O0) © 


JË Structure E] SQL 4 Search |j Query  [@ Export | &j Import فق‎ Operations |» «£j Routines © Events | 3& Triggers 


(Recent tables) ... x 


admin 
menu 


Importing into the database "* 


١ © Create table ) File to Import: 


File may be compressed (gzip, bzip2, zip) or uncompressed. 
A compressed file's name must end in .[format].[compression]. Example: .sql.zip 


© Browse your computer: | Choose File | No file chosen (Max: 50MiB) 


© Select from the web server upload directory A -- 


Character set of the file: | utf-8 M 


Partial Import: 


@ Allow the interruption of an import in case the script detects it is close to the PHP timeout limit. (This might be a good way to import large files, however it can break transactions.) 


Number of rows to skip, starting from the first row: |0 


رفع ملفات الموقع كاملة وذلك بالذهاب للمجلد الموجود فيه الملفات ووضعها في ملف مضغوط كما في الصورة : 


|; » Computer » LocalDisk(C) » wamp » www » project » 


Organize > Open Bum  — Newfolder = > Hn e 
xm Name i Date modified Type Size 
للا‎ Desktop Ji admin fu Combine supported files in Acrobat... 
dj. Downloads d app 
SB) Recent Places "ym @ فحص الملغات المحددة باستخدام‎ Avira 
تممه لقا‎ FB Addto archive... 
و‎ Libraries |; enginel B Addto"projectrar" 
E] Documents ıJ icons R=] Compress and email... 
a Music Ji images FS Compress to "project.rar" and email 
lil Pictures Ji imgs | Sendto » | il Compressed (zipped) folder 
H Videos » web m 5 HW Desktop (create shortcut) - 
"^ config D 
«dj Homegroup "= config? Copy 3 
= k Fax recipient 
7^; det menu. MUS 
"T - FR Create shortcut .J Mail recipient 
omputer ^» det news Delete & 
& Loca Disk (C) EXT) Rename فل‎ DVDRW Drive (G) 
x New Volume (D:) € iframe index 
وت‎ New Volume (E:) "i index - Copy 
وت‎ New Volume (F) = index 715/٠0/٠7 م‎ IEA PHP Script 3k8| 
=, inded 7151/6/7 م‎ «L0! PHP Script 2KB8| 
€i Network. "^ inde2 YeNL/-0/-T p SUYA PHP Script 2KB] 


بعد التضليل على جميع الملفات نقوم بعمل كليك يمين ثم (إرسال إلى) ثم اول خيرا (Comperessed Zipped folder)‏ وسيكون شكله بعد الضغط 
كما في الصورة : 


i] Pictures ıJ imgs Y-\5/-0/*1 p YA File folder 
BE videos web YAL/-E/YA p eV File folder 
(BB admin 715/٠6/١7 a «i. WinRAR ZIP archive 1,562 8| 
«Àj Homegroup "9: config 7١15/٠/75م‎ -ETV PHP Script 1KB 
"Œ config? 711/١1/75 ‘EEE PHP Script 1KB 


بعد الدخول الى لوحة التحكم نذهب إلى التحكم بالملفات بواسطة الضغط على زر File Manager‏ كما في الصورة : 


MOBILE: 00967 714490030 : 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


^ 
& EEE e ToO 
Site File Legacy File Count Disk Web Disk FTP 
Backup Manager File Space Accounts 
Pro Manager Usage 
* 


File Manager Settings 
does not allow inappropriate use of our network for online storage. Please see "UNLIMITED" USAGE POLICIES AND DEFINITIONS| 


Reminder: The 
site are always welcome. For approved online backup services please visit the Partners section of cPanel. 


to ^ f لها‎ & 5 ^ € € 
م هع سا‎ 4 ena) NS 
New File New Copy  MoveFile Upload Download Delete Rename Edit Code HTML Change View Extract Compre. 
Folder Editor Editor Permis 


بعد انتهاء الرفع نقوم بفك الملف المضغوط بالضغط على الملف المضغوط ثم إختيار (Extract)‏ كما في الصورة 


—— ٠١ M © 


priate use of our network for online storage. Please see "UNLIMITED" USAGE POLICIES AND DEFINITIONS for more information. Files uploaded in connection with your hosted 


/ices please visit the Partners section of cPanel. 


A3 7 2 j ( 
B á ت‎ iem P4 وت‎ € € 
Delete | Rename Edit HTML Change View Extract Compre 


Editor Editor Permis 


ne Level 48 Back CÒ Forward T Reload [v] Select all [Bl] Unselect all 
Perms 


Last Modified (Arab Stan Type 
package/x-generic 


Name 
| 1.52 MB | Today 9:19 PM 


نقوم بفك الملف والتأكيد على ذلك بعدها يتم الذهاب مباشرة للملف config.php‏ و الملف config2.php‏ وتغيير بيانات الدخول بالضغط على الملف 
الأول config.php‏ ثم الملف config2.php‏ واختيار Code Editor‏ كلا على حده: 


config2.php ملف‎ 


10pt v| Php v || ab 3 2 [s ©‏ © هخ 


config2.php ملف‎ 


« 
K 
l 
e 


4 © 10pt v ||| Pro 


<?php 


$con = mysql_connect )" 


?» 


بالانتهاء من الخطوات أعلاه نذهب للموقع إذا كان على دومين او الى المجلد الذي اطلقنا فيه الموقع كما هو في التطبيق الحالي وسيكون الاطلاق 
الخاص بهذا التطبيق على الرابط : /http://techpio.net/php‏ 


www.techpio.net 
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وسيكون شكل ad gall‏ النهائي الخاص بالتطبيق كما في الصورة : 


7 PIECI? 
من تحنل اتس بت‎ Jay! ja من اهاسنا‎ (n venis H 


شبكات وصيانة حاسوب جرافكس وتصاميم تصاميم مواقع الكترونية 
نصمم شيكات بأحدت التقنيات وبكل من الخدمات الراقية والجميلة التى نقدمها تقوم رواد التكنولوجيا بتصميم المواقع 
احترافية ونقدم خدمات الصيانة للحاسبات تصاميم لجميع وسائل الدعاية الالكترونية الرسمية بأتواعها سواء كانت 
والشبكات بأتواعها للمؤسسات والشركات والإعلان,قريق محترق وخيرة عالية في تجارية أو مؤسسات خدمية أو حكومية او 
والأشخاص... التصاميم الورقية و.. منظمات „Í‏ 


www.techpio.net 


<1 


5 


Joomla! 


JOOML 


JOOMLA! 2.5 & JOOMLA! 3.2 


CMS CONTENT MANAMEMENT SYSTEM 


نظام إدارة المحتوى (جوملا) 
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oY 
الباب الخامس جوملا‎ 


(JOOMLA) Maga 
يمكن من خلال جوملا إنشاء مواقع قوية وذو مواصفات‎ (CONTENT MANAMEMENT SYSTEM) CMS جوملا نظام إدارة محتوى‎ 
عالية وتطبيقات ويب قوية وبسهولة تامة. و وتعتبر جوملا نظام إدارة محتوى مجاني مفتوح المصدر ومتوفر للجميع.‎ 


(CONTENT MANAMEMENT SYSTEM) CMS ما هو‎ 


هو نظام يحوي أدوات مبرمجة بشكل احترافي تساعد على ادارة محتوى الموقع الالكتروني والتحكم بأجزائه وبياناته وظهوره بشكل عام ويبرمجها 
فريق من المتطوعين حول العالم وهي مفتوحة المصدر مثل : جوملا - وورد بريس - دروبل. 


تتميز هذه الأنظمة بالمرونة العالية والسهولة في ادارتها بعيدا عن التعقيدات البرمجية الخاصة بالمواقع الالكترونية وبإمكانها تقبل أي مكونات خارجية 
من مواقع داعمه لها وتركيب اكواد جاهزة تسمى (مكونات — موديولات - اضافات مساعدة ) بشكل يدوي وبدون برمجة وبسهولة تامة بشرد توافقها 
مع الاصدار بالنظام» كما يوجد تحديث دوري لهذه الأنظمة من المواقع الرسمية الخاصة بها. 


البداية مع جوملا (JOOMLA!)‏ 
سيكون لنا تطبيقات عملية على جوملا وكيفية تركيبها وعملها من البداية وسيكون لنا الان مقدمة حول جوملا وشرح عام عن مكوناتها ويمكن زيارة 
الموقع الرسمي لها من خلال الرابط : www.joomla.org‏ 


مكونات جوملا! 
بداية جوملا نظام مبرمج بلغة معروفة وهي PHP‏ مع قاعدة البيانات MYSQL‏ بالإضافة إلى لغات تنسيق المواقع ) - HTML - CSS - CSS3‏ 
(HTMLS -JQUERY‏ 


مكونات نظام جوملا : 

قاعدة البيانات (Database)‏ 
الموديولات (Modules)‏ 
المكونات الرئيسية (Components)‏ 
قالب (Template)‏ 


اضافات مساعدة (Plugins)‏ 


قاعدة البيانات :(Database)‏ 


قاعدة البيانات وهي التي ستحوي مكونات الموقع من بيانات وسجلات. 
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viv 
:(Modules) الموديولات‎ 
هي أحد اجزاء المواقع الالكترونية والتي يتم ضبط اعداداتها وتحديد مكان ظهورها في الموقع.‎ 
:(Components) المكونات‎ 
هي المكونات الاساسية الخاصة بالموقع وقد تحوي موديلات واضافات مساعدة خاصة بها.‎ 
:(template) قالب الموقع‎ 
قالب الموقع عبارة عن ستايل مصمم خصيصا للنظام جوملا أو لأي أنظمة أخرى ويتم تركيبها للنظام ويتم تغيير شكل الموقع من خلال قسم القوالب.‎ 
اضافات مساعدة(ورزعن21):‎ 
عبارة عن اضافات يتم تكرارها في اجزاء الموقع او تعمل عملها بشكل عام داخل الموقع بعدة أجزاء وليس جزء وتتكرر بشكل ديناميكي حسب وظيفتها.‎ 


صورة عامة حول موقع يعمل بنظام جوملا: 


KIDSLAND | EL — 42 
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حسب الأسهم الموجود في صورة الموقع أعلاه جميع الاجزاء المشار لها عباره عن موديولات تم التحكم بها من خلال وضعها المكان المناسب لها 
وأيضا تحديد الجداول للبيانات أو أقسام الموقع الذي ستستمد منه البيانات وتقوم بعرضها. 


HOME PRODUCTS GIRLS BOYS BABY TOYS 8 GIFTS SALE OUTLET 


Home » Bundle product 


Bundle product 
ROReview — 4 Add Y 

Availability: In Stock 
from: $106.00 
To: $285.00 
Price as configured: $0.00 
*SetB 

1 x Cras ut lorem ut dui aliquet volutpa 0م‎ 

1 x Praesent rutrum nisi vitae eros scelerisque +$49.00 


1 x Nam eu pharetra magna sit amet erat ante +$119.00 


*SetA 


Choose a selection. "Ix 0 


عند الضغط على مقالة أو خبر معين ضمن موقع يستخدم جوملا فإن المكان الذي تظهر فيه المقالة او !2332 يسمى Ua s(component)‏ هناك 
موديولات تتحكم فيها مكونات كما في الصورة السابقة. 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.‏ 


Fusce vehicula nec sapien et semper. Donec vel molestie nulla. Donec dui sapien, hendrerit nec 
condimentum ornare, tempor a dolor. Praesent pulvinar justo ut metus dignissim lobortis. 


ENG vmm 


في الصورة اعلاه نلاحظ الجزء الذي يحوي ازرار (like)‏ او (tweet)‏ وغيرها تظهر في جميع الأخبار أو المقالات للموقع بشكل أتوماتيكي. وهي 
تسمى plugins‏ اضافات مساعدة يتم ضبط اعداداتها وتحديد الاقسام التي ستتواجد فيها. 
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العمل على جوملا ۲.١‏ 


سيتم التعرف على جوملا وكيفية التعامل معها وسيكون الاصدار الذي سنتعلم عليه هو النسخة X.‏ .2,5 وأيضا نظرة عامة حول joomla 3.X‏ ويمكن 
للمتعلم على النسخة 2.5 أن يتعامل مع النسخة 3.2 بكل سهولة لتشابه النظام واختلاف الواجهة فقط وبعض التعديلات البرمجية. 


متطلبات العمل على جوملا 
يجب أن تتوفر لدينا بعض الأدوات التي نستخدمها في تركيب جوملا والعمل عليها وهي كالتالي: 


برنامج سرفر محلي مثل (wampserver)‏ وهو عبارة عن سرفر وهمي على جهازك يتم تركيب الموقع عليه وكأن الموقع يعمل على سرفر حقيقي 
على الانترنت. 


متصفح جوجل كروم بالإضافة إلى متصفح موزيلا فايرفوكس لتجريب المواقع على المتصفحين. 
دريم ويفر (Dreamweaver)‏ ونستخدمه للتعديل على الأكواد وصفحات القوالب. 
اداة Firebug‏ وهي اضافة تضاف الى فايرفوكس وسنذكر لاحقا فائدتها. 


يفضل معروفة ولو بسيطة حول عمل المواقع الالكترونية ولغات البرمجة بالإضافة للغة الانجليزية. 


تنزيل جوملا من الموكع الرسمي وتركيبها 
نقوم بداية بإخذ آخر نسخة من جوملا من الموقع الرسمي لها على الرابط www.joomla.org‏ ثم التأشير على Download‏ والضغط على 2.5 
Full Package‏ باللون البرتقالي الغامق كما في الصورة: 


Download v 


Download Joomla! 2.5 


The Platform Millions of 


Websites Are Built On 


2.5 Full Package Update Packages Demo Joomla! 2.5 


Download Joomla! 3.3 


Q Over 50 million downloads and counting Update Packages Demo Joomla! 3.3 


Q Thousands of extensions and designs Getting Started with Joomla! 


© User-friendly and mobile-ready Beginner Documentation 


Technical Requirements 


—— y License & Usage 
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ستظهر الصفحة التالية: 


«9 Download Joomla! 3 


English (UK), 3.3.0 Full Package, ZIP 


Upgrade Packages‏ هه 
Joomla! 3.3.x and 3.x Upgrade Packages‏ 


Release Notes » PHP 5.3.9 or below? 


te? Joomla! Hosting 


s Web Hosting Pre-loaded with Joomla! 


Advertisement 


Download Joomla! 2.5.x 


Joomla 2.5 is the previous version of Joomla, which will be supported until December 31, 2014. For upgrade 
instructions to Joomla 3, please see the FAQs below. 


«®» Download Joomla! 2.5 هه‎ Upgrade Package 
English (UK), 2.5.20 Full Package, ZIP English (UK), 2.5.x to 2.5.20 Upgrade Package, ZIP 


Other Joomla 2.5.x packages » 


من الصورة أعلاه نقوم بالضغط على الزر 2.5 Download Joomla!‏ باللون الازرق الصف الثاني . بعد الضغط عليه سيتم تحميل آخر نسخة من 
نظام جوملا. 


بعد تحميل الملف الخاص بجوملا نقوم بعمل مجلد داخل المجلد العام www‏ ونسميه joomla2.5‏ نقوم بفتحة وننقل الملف الخاص بجوملا الى المجلد 
joomla2.5‏ ونقوم بفك الضغط كما في الصورة: 


CE) | | » Computer » LocalDisk(C) » wamp » www » joomla2.5 » ~ | s [| Search joomia25 


Organize v B Open v Burn New folder 


x Favorites Name Date modified Type Size 
BE Desktop | Joomla 2.520-Stab chive 7,765 KB 
B Downloads Open 
E] Recent Places 8 Extract files... 

8 Btract Here 
1 Libraries B Extract to Joomla_2.5.20-Stable-Full_Package\ 
[À Documents Open with » 
الى‎ Music فحص العلغات المحددة باستخدام‎ Avira 
i| Pictures Restore previous versions 
Bi Videos F Send to » 
+@ Homegroup Cut 
Copy 

m — Create shortcut 
ملك‎ Local Disk (C) n 
وى‎ New Volume (D:) 

Rename 
وت‎ New Volume (E:) 
cs New Volume (F:) Properties 
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بعد فك الضغط عن الملفات نقوم بحذف الملف المضغوط او نقله لمكان آخر للحاجة ستظهر كما في الصورة : 


CIO > Computer » Local DiskC) » wamp > wew + joomla > :‏ 
1 س س و ڪڪ ڪڪ يي يي يھ ص ص 


Organize > Include in library v Share with v Burn New folder 


* 


Xt Favorites Name Date modified Type Size 
BE Desktop ıJ administrator 7١15/+ق/7‎ ue «MT File folder 
ll Downloads J cache YALE- ص‎ AY File folder 
E] Recent Places Ji di 7١15/٠1/7١ ص‎ MY File folder 
ü components 7١15/٠1/7١ uM File folder 
Al Libraries J images 7١15/٠3/7 + ص‎ «N: File folder 
[3] Documents Û includes 7١15/٠5/7١ ص‎ eA)? File folder 
a Music JÎ installation 7١15/٠5/7١ ص‎ “NIT File folder 
fi] Pictures J language 7١15/٠3/7١ 7انالء ص‎ File folder 
I videos J libraries 7١15/٠5/7١ ص‎ «YT File folder 
J logs 7١15/١5/7١ ص‎ «N: File folder 
ركو‎ Homegroup J media 7١15/١5/7١ ص‎ °1۲ File folder 
J modules 715/٠5/7١ ص‎ «A: File folder 
jW Computer JÎ plugins 7١15/٠ 7/ق‎ + ue MT File folder 
& Local Disk (C) J templates 7١15/٠1/7١ ص‎ MY File folder 
وت‎ New Volume (D:) ü tmp 7١15/٠1/7١ ص‎ °: File folder 
وت‎ New Volume (E:) |] htaccess 7١15/٠3/7١ ص‎ °: Text Document 4KB 
وى‎ New Volume (F:) "I index 7١15/٠2/7 ٠١ ua -NlT PHP Script 2KB 
اك‎ joomla 7١15/٠1/7١ ص‎ °: XML Document 2 KB 
@ Network [Î LICENSE YALT- ص‎ «MY Text Document 18 KB 
ل‎ README Y-\L/-E/T+ ص‎ «N: Tet Document 5KB 
|] robots.txt.dist 7١15/٠1/7١ ص‎ MY DIST File 1 KB 
| web.config 7١1 5/٠١قي/؟‎ ٠ 7انلء ص‎ Tet Document 2KB 


k 22 items 


كما نلاحظ الصورة أعلاه تظهر ملفات النظام كاملة نقوم الان بالذهاب على localhost‏ ثم الضغط على المجلد joomla2.5‏ الذي فيه نظام جوملا 
وستظهر الصفحة كما في الصورة: 


€ > QC [localhost/joomla2.5/installation/index.php woG FOZ X فف‎ z 
Joomla! 2.5.20 Installation EX Joomla!’ 
Steps Choose language next O 
1: Language 
Select Language 
2: Pre-Installation check Please select the language to use during the Joomla! installation 
steps: Afrikaans (South Africa) 
3: License 
Armenian 
4: Database Azeri-Azarbaycanca (Azarbaycan) 
Bahasa Indonesia 
5: FTP Configuration Belarusian-benapyckan (Benapyce) 
Bengali (Bangladesh) 
E 5 Bosanski (Bosnia) 
CUL bd Bulgarian (Benrapckn) 
تدك‎ Catalan 
7:Finish Chinese Simplified j f rh z 
Chinese Traditional (Taiwan) 
Croatian 
Czech (Czech republic) 
Danish (DK) 


English (Australia) 

English (United Kingdom) 

English (United States) 

Esperanto 

Estonian mi 


Joomla! & is free software released under the GNU General Public License. 
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نقوم باختيار اللغة العربية في حالة كانت ARI‏ أخرى ثم الزر next‏ في الأعلى على اليمين وستظهر الصفحة التالية: 


حطرب —— فحص ما قبل التثبيت 0 تس © سین Qe‏ 


1 : اختيار اللقة 
قحص ماقيل التنبيت من أجل Joomla! 2.5.20 Stable [ Ember ] 30-April-2014 14:00 GMT‏ 
geni: 2‏ ما قبل التتبيت إذا كان أي من هذه المناصر غير مذعوم "أي غير متوفر" سيكون فكتوب 
باللون الأحمر (لا) عندها يرجى القيام بالإجراءات اللازمة لتصحيحها. عدم إصدار 5.2.4 => PHP‏ نعم 
3: الترخيص القيام بذلك يمكن أن تؤدي إلى عدم تثبيت نظام جوملا! بشكل صحيح. E‏ و E E‏ = 
دعم لغة التوصيف الموسعة XML‏ نعم 
m Snn‏ - 
n‏ استخدام لغة افتراضية متعددة وحدات البايت (MB Language is Default)‏ نعم 
FIP Ww 5‏ إيقاف التحميل الزائد للسلسة متعددة وحدات البايت (MB String Overload Off)‏ نعم 
5 دعم محلل INI‏ نعم 
6 : ادات هرئيسية دعم JSON‏ نعم 
configuration. php‏ قابل للكتابة نعم 
7: الإتهاء 
الإعدادات التي يتصح يها: 
هذه إعدادات PHP‏ التى يتصح بها من أجل ضمات التواقق التام مع نظام 
جوملا!, التوجيهات ينصح يها حالياً 
واكك سوف يعمل نظام جوملا! حتى لو كانت الإعدادات غير متطابقة مع الوضع الأمن Jimi nar (Safe Mode)‏ 
ure‏ عرض الأخطاء (Display Errors)‏ لا يعمل يعمل 
رفع الملقات (File Uploads)‏ يعمل يعمل 
زمن تشغيل الاقتباسات السحرية (Magic Quotes Runtime)‏ الا يعمل لا يعمل 
Magic Quotes GPC‏ لا يعمل لا يعمل 
التسجيل العام (Register Globals)‏ لا يعمل لا يعمل 
تخزين المخرجات (Output Buffering)‏ لا يعمل يعمل 
بدء الجلسة بشكل (Session Auto Start) „JÌ‏ لا يعمل لا يعمل 
توفرة ZIP‏ خاصية فك الملفات المضغوطة يعمل يعمل 


®!Joomla‏ برتامح "حر مفتوح المصدر“ تم طرحه بموجب GNU/GPL‏ رخصة gi>‏ العمومية. 


نلاحظ في الاسفل على اليسار كلمة نعم باللون الأحمر يجب تعديلها حسب طلب النظام وسنقوم بتغيير الاعدادات الخاصة Display Errors-‏ وازالة 
علامة الصح من أمامها وكذلك ال Output Buffering‏ وذلك بالضغط بالزر الأيسر على wampserver‏ كما في الصورة: 


| Oa 3 LI Microsoft Word - E-Media Book 2 aw 
PHP settings. 


© ه‎ Adobe ^ (XDebug): Remote debug 


” هه بحث‎ A 71 1 1 Y oz 5 PINE i — (Debug): Profiler 
٠ aai AN jack jai أبجد هوز‎ Tan (XDebug) : Profiler Enable Trigger 
تغيير‎ )-١ العتوان عنوان فرعى‎ Y عتوان ۱ عتوان ۲ عتوان‎ - 3 


la E x x, abe > IB 
> تحديد‎ |n الأنماط‎ ; short open tag U 


p 5 bla 


اإدراج تخطيط الصفحة 


Fa] E: 017: 1 16 I 15: 1 14: 10 13: 1 *12* 0 10 I/O! 1*9 5 01: 8*1 7 
a 


T T ¥ y2k comi 
في الأعلى على اليمين وستظهر الصفحة التالية:‎ next الزر‎ ad lib output compression 
B 


implicit flush 


safe mode 


© ص‎ -Q9--Q9 v/ expose PHP. 

4 ¥ display errors 

¥ display startup errors 
| Vf. log errors 

ignore repeated errors 


ignore repeated source‏ سيد 


111111111 
3 


/ report memleaks 

vl track errors. 
register globals 
register long arrays 


register argc argv 
— magic quotes عمو‎ | wered by Alter Way 
magic quotes runtime 
magic quotes sybase 
enable dl 
ت رن مم سیت‎ eene cs, U^ | w^ file uploads 
¥ allow url fopen 

allow url include‏ لمر يجب تعديلها حسب طلب النظام وسنقوم بتغيير الاعدادات الخاصة Display Errors;‏ وازالة 

Outpù‏ كما فى الصورة: 


PHP extensions * 
| php.ini 
] PHP error log 


B 
m 
uc Start All Services 
Stop All Services 

Restart All Services 


« o »«[n] 


s O see 


LI 


sE) العربية (اليمن)‎ SZ | 55 
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Y£4 
: نعود للصفحة للنظام ثم نضغط على الزر (إعادة الفحص) على اليسار أعلى الصفحة وستظهر الصفحة كما في الصورة‎ 


€ © | D localhost/joomla2.5/installation/index php?view- preinstall DIESE FOZ 1 نف‎ E 


X1 Joomla! التثبيت‎ Joomla! 2.5.20 


خطوات التنصيب فحص ما قبل التثبيت © عد سس | © سيق | Qe‏ 


Joomla! 2.5.20 Stable [ Ember ] 30-April-2014 14:00 GMT من أجل‎ cx قحص ماقبل‎ 


إذا كان أي من هذه المناصر غير مدعوم "أي غير متوفر” سيكون مكتوب 
باللون الأحمر (Y)‏ عتدها يرجى القيام بالاجراءات اللازمة لتصحيحها. عدم إصدار 5.2.4 => PHP‏ 


2 Zb القيام بذلك يمكن أن تؤدي إلى عدم تثبيت نظام جوملا! بشكل صحيح. دعم الضغط باسكتدام خاضية‎ mS 
تعم‎ XML دعم لغة التوصيف الموسعة‎ 
2 0 د عم‎ 
نعم‎ (MB Language is Default) استخدام لغة افتراضية متعددة وحدات البايت‎ zu 
نعم‎ (MB String Overload Off) تهيئة ۴ إيقاف التحميل الزائد للسلسة متعددة وحدات البايت‎ : 5 
نعم‎ INI دعم محلل‎ 
نعم‎ JSON الإعدادات الرئيسية دعم‎ : 6 
قابل للكتابة نعم‎ configuration.php. 
الإنهاء‎ :7 
الإعدادات التي يتصح يها:‎ 
9 التى يتصح بها من أجل ضمان التواقق التام مع نظام‎ PHP هذه إعدادات‎ 
جوملا! التوجيهات يتصح بها حالياً‎ 
dem y (em Cafe Mode] c nini ومع ذلك سوف يعمل نظام جوملا! حتى لو كانت الاعدادات غير متطابقة مع‎ 
لا يعمل‎ das; V (Display Errors) عرض الأخطاء‎ pies 
يعمل يعمل‎ (Fie Uploads) رفع الملقات‎ 
لا يعمل‎ daz; V (Magic Quotes Runtime) زمن تشغيل الاقتباسات السحربة‎ 
لا يعمل‎ daz; V Magic Quotes GPC 
لا يعمل لا يعمل‎ (Register Globals) i/i اتتسجيل‎ 
لا يعمل لا يعمل‎ (Output Buffering) تخزين المخرجات.‎ 
لا يعمل لا يعمل‎ (Session Auto Start) بدء الجلسة بشكل ألى‎ 
خاصية فك الملفات المضغوطة يعمل يعمل‎ ZIP توفرة‎ 


83 برنامج "حر مفتوح المصدر” تم طرحه بموجب GNU/GPL‏ رخصة si»‏ العمومية. 


كما نلاحظ الصورة أعلاه لم يعد هناك أي تنبيه باللون الأحمر لذا نواصل التركيب ونعمل كليك على (التالي) وستظهر الاتفاقية الخاصة بجوملا نعمل كليك 
على الزر (التالي) وستظهر الصفحة التالية: 


€ © | D localhost/joomla2.5/installation/index php?view-preinstall x + جا 2خ‎ 5 7 € ð z 


Joomla! 2.‏ التثبيت 


خطرات ——— تهيئة قاعدة البيانات Qe a9‏ 


إعدادات الإتصال 


المواقع التى تستخدم نظام جوملا! تقوم بتخزين كاقة البياتات الخاصة الإعدادات الأساسية 
Er‏ بالموقع فى قاعدة بيانات. هذه الشاة تعطى برتامج التنصيب المعلومات 

3 : الترخيص اللازمة لإنشاء قاعدة البياتات هذه. egi‏ قاعدة البيانات * 
هذه على الأرجح MySQU"‏ 


4 : تهيئة قاعدة البيانات إذا كتت تقوم بتقبيت جوملا!! على خادم الويب البعيد I)‏ رقر الحقيقى). Y» Mysqli‏ 
ipani gin == i‏ على هذه السلوعات . " 
ستحتاج للحصول على هذه المعلومات من قبل سيرفر الاستضافة E T‏ 
es‏ هذا عادة يكون * 1 
2 بعض سيرقرات الاستضافة تنطلب إتشاء قاعدة البيانات قبل تتصيب جوملا!. localhost‏ هذا عادة يكون “)عه ادم 
5 : تهينة FTP‏ إذا ظهرت لك الرسالة التالية " تعذر الاتصال بقاعدة البانات”: قم بالتحقق من 
أن اسم المستخدم وكلمة المرور صحيحتين: وفى حال استمرت هذه اسم المستخدم * 
6 : الإعدادات الرئيسية الرسالة بالظهورء قم بالتاكد هن سيرقر الاستضاقة الخاص بك لمعرفة ها |13 root‏ نل ”7004أو اسم مستخدم محدد من قبل سيرقر الاستضافة 


كنت بحاجة الانشاء قاعدة البيانات قبل تتصيب جوملا! 
كلمة مرور قاعدة البياتات 


7 : الإتهاء إن استخدا مكلمة مرور خاصة بحساب MYSG!‏ يعتبر ى هن أجل حماية وأمان الموقع 


اسم قاعدة البياتات * 
joomla:‏ 


المفردات الرئيسية للموقع بينها 
بادئة الجداول * 


2 
w1k5r 
SX 


عمليات قواعد البيانات القديمة * 


@ النسخ الاحتياطى مر استيذال جميع جذاول النسخ الاحتياطى الخاصة جوملا! السابق 
إزالة 


Joomla‏ برنامج "حر مفتوح المصدر" تم طرحه بموجب GNU/GPL‏ رخصة جنو العمومية. 


نلاحظ البيانات المطلوبة coste i‏ نترك الخيار الأول كما هو الخيار الثاني وهو اسم السرفر الذي سيحوي الموقع الالكتروني .اسم المستخدم وهي تخص 
مستخدم قاعدة البيانات بالإضافة الى كلمة المرور. قاعدة البيانات وضعنا joomla‏ وهي اسم قاعدة البيانات التي سنركب عليها نظام جوملا ويجب ان 


تقوم بعملها مسبقا. بادئة الجدول نتركها كما هي وهي أحد وسائل الحماية لقاعدة البيانات. ثم نواصل ونقوم بعمل كليك على (التالي) وستظهر بعد عملية 
الاتصال الصفحة التالية: 


MOBILE: 00967 714490030 : 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


Yo. 


¥ Joomla! التثبيت‎ Joomla! 2.5.20 
Qo) FTP تهينة‎ ESCALA 
اختيار اللغة‎ : 1 


تهينة FTP‏ (اختياري - معظم المستخدمين يمكتهم تخطي هذه الخطوة - اضغط "التالي" للتخطي) 
2 : قحص ما قبل التثبيت 


مع بعض سيرفرات الاستضافة من الهمكن أن تحتاج إلى حساب FTP‏ من الإعدادات الأساسية 
plos} T‏ عملية تنصيب جوملا!, في حال واجهتك صعوبات بعملية إتمام 
:رسن التنصيب بدون حساب FTP‏ راجع مزود الاستضافة الخاصة بموقعك للتأكد خاصية مع * v‏ 


من ضرورية هذا الإجراء. 5 
تحذير! من المستحسن ترك هذا قارغاً وإدخال اسم مستخدم حساب 77/فى كل مرة 


من أجل حماية وأمان جوملا!, يفضل أن تقوم بإنشاء حساب FTP‏ متقصل مع اسم مستخدم FTP‏ تقوم بها ينقل الملفات 
صلاحية تقتصر على الوصول إلى تنصيب جوملا إفقط وليس كاملل الموقع. i‏ رك هذا فارع وإدخال كلمة م DT.‏ 
5: تهيئة FTP‏ 3950 الاستضافة الخاص بموقعك يمكنه أن يساعدك قى هذا الأمر. كلمة 5552 Eee feos FTP‏ ترك هذا قارغا وإدخال كلمة مرور حساب ۴7۴ قى كل مرة تقوم 
لاحظ ذَلك: فى حال كتت تقوم بتنصيب جوملا! على سيرقر ويتدوز, قان 
6 : الإعدادات الرئيسية جسية BFIP‏ مطلولة؟ TORS‏ 
إيجاد تلقائی لمسار FTP‏ | | التحقق من إعدادات بروتوكول تقل الملفات [FTP‏ 
7: الإجهاء 
الإعدادات المتقدمة > 
e - n ^" *‏ - 053 5 
E‏ 
ايضا نقوم بعمل كليك على (التالي) وستظهر الصورة التالية: 
z‏ فف عه Z‏ 9 ج e e pD localhost/joomla2.5/installation/index.php?view=preinstall# Dir] # L3‏ 
t? . " ^‏ 
Joomla! 2.5.20‏ التثبيت EX Joomla!‏ 
خطوات التنصيب الإعدادات الرئيسية Qe) a9‏ 
1 : اختيار ARD‏ 
اسم الموقع 
2 : فحص ما قبل التثبيت prm‏ — 
إختياري: يمكنك أيضاً إدخال البيانات الوصفية والكلمات المفتاحية الخاصة الإحدادات الأساسية 
3 هاري بالموقع. mm n‏ 3 
اسم الموقع إرواد التكتولوجيا | Jy Pioneers‏ 
4 : تهيئة قاعدة البيانات الإحدادات المتقدمة - إختياري b‏ 
5: تهينة FTP‏ 
9 تأكيد البريد الإلكتروتي وكلمة العرور لحساب العدير. 
6 : الإعدادات الرئيسية 
أدخل بريدك الالكتروتى. والذي سيكون البريد الالكترونى الخاص بالمدير 
uN:‏ العام للموقع „(Super Administrator)‏ 35 
iub‏ دخل كلمة مرور جديدة تم قم بتأكيدها قى الحقل المناسب. يمكنك تغيير بريدك الإلكتروتى en.yuauf18@gmail.com‏ 
اسم المستخدم الاقتراضى (يتصح به بشدة من أجل الحماية والأمان) 
admin‏ وهما سيكونان اسم المستخدم وكلمة المرور الذين اسم مستخدم المدير = admin‏ 
ستستخدمهما للدخول إلى لوحة التحكم المدير فى بعد الإنتهاء من عملية 
4 3 كلمة مرور مدير الموقع * ecco‏ 
إذا كتت تقوم الترقية من نسخة سابقة, يمكتك تجاهل هذا القسم. 
الاعدادات الحالية سيتم ترقيتها LIAU‏ تأكيد كلمة مرور مدبر الموقع * set‏ 
Š e.‏ 
4 تحميل البياتات التموذجيه 
هام!: تتصح بشدة جمبع مستخدمى جوملا! الجدد القيام بتنصيب البيانات mM E‏ 
التموذجية. للقيام بهذا اضغط على الزر السابق الانتقال إلى المرحلة البياتات التموذجية (GB)‏ المدوتة باللغة الاتكليزية 
التالية. مجموعة البياتات التموڌجية البيانات التموذجية (GB)‏ للتشرة باللغة الإتكليزية 
© البياتات التموذجية (GB)‏ باللغة الانكليزية 
1- البيانات النموذحية: قبل مغادرة التنصيب, يمكنك ملء قاعدة بياتات 2 e‏ 
الموقع بالبيانات. توجد طريقتين لعمل ذلك:. E z‏ 1 
تم تنصيب البيانات التمونجية ينجاج! 
1.- البيانات النموذحية الافتراضية يمكن أن تستخدم. للقيام بهذا, 5 5 
البياتات التموذجية باللغة الانكليزية الاقنراضية(68) موجودة قى القائمة النمودجية والذي تم تضمينه قى 
المتسدلةء ثم اضغط على زر تنصيب البيانات التموذجية الاقتراضية. 
1.2- البيانات النموذحية الخاصة يمكن ان تستخدم. للقيان بهذا, قم 


باختباد بيانات تمودّجية متاحة مء القاثمة المنسدلة: اضغط عله , ذد تتصبب 


من خلال الصفحة أعلاه نقوم بتعبئة البيانات الحقل الأول (اسم الموقع) ونكتب فيه اسم الموقع الذي نريده ثم ننتقل للمجموعة الحقول التالية ونكتب 
(بريد الكتروني) أي بريد خاص بنا. ثم (اسم مستخدم المدير) وهو الاسم المهم وهو اسم تسجيل الدخول للمدير ثم كلمة المرور مرتين. 


في الجزء (مجموعة البيانات النموذجية) وفيه نقوم بالضغط على زر (تنصيب البيانات النموذجية) وهي بيانات افتراضية موجودة ضمن نظام جوملا. ثم 
نضغط على (التالي) وستظهر الصفحة التالية: 
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Joomla! 2.5.20‏ التثبيت Joomla!’‏ 
خطوات التنصيب الإنهاء =A ss Ch‏ 
1 : اختيار اللغة 


ميروك! لقد تم تتصيب تظام جوملا! يتجاح. 


انقر على زر "الموقع" لمشاهدة موقعك بتظام جوملا!ء أو على زر "الإدارة" 
للإتتقال إلى صفحة دخول الإدارة. 

على موقع مجتمع جوملا! (Joomla! Community)‏ سوف تجد لائحة روابط 
لحزم cll‏ المتوفرة وكذلك روابط للموارد المتعلقة باللغات فى عائلة 
مواقع .joomla.org‏ 


FTP ig: 5‏ فخ علق M‏ التوكوه علق cM Gin‏ جوج thm inch‏ فب N‏ هام حدآ... من أحل إكمال عملية التنصيب. 
+ متصفح جديدة - "A‏ 
يجب عليك القيام بإزالة محلد التنصيب "installation"‏ بشكل „Jols‏ 

لن يمكنك الوصول إلى أبعد من هذه النقطة إلا بعد إزالة مجلد التنصيب. 


هذا من أحل حماية وأمان حوملا! 
7: الهاء PETET‏ 


تفاصيل تسجيل دخول الإدارة 


6: الإعدادات الرئيسية 


اسم المستخدم لقاعدة البيانات : admin‏ 


حوملا! بلغتك الأم؟ 
يه we‏ قم بزيارة موقع مجتمع جوملا! (Joomla! Community)‏ لتنزيل حزم اللغات 


Joomla‏ © برتامج "حر مفتوح المصدر" تم طرحه بموجب GNU/GPL‏ رخصة جنو العمومية. 


نقوم بالضغط على (يرجى إزالة مجلد التنصيب) ننتظر الى ان يتم ازالة المجلد وتأتينا رسالة من الزر نفسة (لقد تمت إزالة مجلد التنصيب) ثم نفتح 


نافذتين واحدة للزر (الموقع) والثانية ل(المدير) 
سيظهر الموقع كما في الصورة: 


© | D localhost/j/oomla2.5/ Z E oU 5 Z 


Search... 
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HOME SAMPLE SITES JOOMLA.ORG 


Joomla!’ 


Open Source Content Management 


You are here: Home 


About Joomla! Joomla! 


Getting Started Congratulations! You have a Joomla site! Joomla makes it easy to build a website just the way you want it and keep it 


simple to update and maintain 
Using Joomla! 
Joomla is a flexible and powerful platform, whether you are building a small site for yourself or a huge site with hundreds of 
l 
The Joomla! Project thousands of visitors. Joomla is open source, which means you can make it work just the way you want it to. 


The Joomla! Community 


This Site 


Home 
Site Map 


Lanin 
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Beginners 


If this is your first Joomla! site or 
your first web site, you have come 
to the right place. Joomla will help 
you get your website up and running 
quickly and easily. 


Upgraders 


If you are an experienced Joomla! 
1.5 user, this Joomla site will seem 
very familiar. There are new 
templates and improved user 
interfaces, but most functionality is 


Email: infoetechpio.net 


Professionals 


Joomla! 2.5 continues development 
ofthe Joomla Framework and CMS 
as a powerful and flexible way to 
bring your vision of the web to 
reality. With the administrator now 


www.techpio.net 


صفحة لوحة التحكم كما في الصورة: 


€ جه‎ © [)localhost/joomla2.5/administrator/ y A4X* ou 5 27 &w- z 


Administration 


Joomla! Administration Login 


Use a valid username and password 
to gain access to the administrator 


backend. User Name 
Go to site home page. 
Password 
Language Default M 


Login © 


Joomla'® is free software released under the GNU General Public License. 


تعريب نظام جوملا 


قبل البدء بالتعريب نقوم بتنزيل ملف اللغة العربية من موقع جوملا الرسمي من خلال الرابط التالي: 


htt 


joomlacode.org/ef/project/jtranslation1 6/frs/?actionzFrsReleaseBrowse&frs package id-5613 


بعد الدخول على الرابط ستظهر الصفحة التالية: 


r9 J | c d T Home | About Joomla | Community | Forum | Extensions | Documentation | Developer | Shop 
powered by c E 
FORGE Home My Stuff Users Search Snippets N UC, t Login | Register new account 
| 
Project Menu Home » Projects » Joomla!&2.5 Accredited Translations » Releases » Arabic Unitag ar-AA »Browse Frs Release | 
D $"msY  Joomla!®2.5 Accredited Translations | 
»» Reporting | 
» Message Wall Arabic Unitag ar-AA 9 2013-02-03 17:00:00-06 ar-AA joomla lang full 2.5.9v1.zip 323.25 KB 21290 
S 4 Arabic Unitag ar-AA 2.5.8 2012-11-08 17:00: ar-AA joomla lang full 2.5.8v1.zip 325.34 KB 18431 
DIST Arabic Unitag ar-AA 2.5.20 2014-04-29 18: ar-AA joomla lang full 2.5.20v1.zip 285.13 KB 841 
» Blog Arabic Unitag ar-AA 2.5.19 2014-03-05 17: ar-AA joomla lang full 2.5.19v1.zip 323.94 KB 6531 
Rel Arabic Unitag ar-AA 2.5.18 2014-02-06 17:00:00-06 ar-AA joomla lang full 2.5.18v1.zip 323.76 KB 4495 
* Releases 
Arabic Unitag ar-AA 2.5.17 2013-12-18 17:00:00-06 ar-AA joomla lang full 2.5.17v1.zip 323.84 KB 5869 
<< SVN 5 ar-AA joomla lang full 2.5.16v1.zip 323.61 KB 3249 
Arabic Unitag ar-AA 2.5.16 2013-11-06 17:00:00-06 
ar-AA joomla lang full 2.5.16v2.zp 323.84 KB 3281 
Arabic Unitag ar-AA 2.5.13 2013-07-25 18:00:00-05 ar-AA joomla lang full 2.5.13v1.zip 323.62 KB 11849 
Arabic Unitag ar-AA 2.5.11 2013-04-26 18:00:00-05 ar-AA joomla lang full 2.5.11v1.zip 323.48 KB 14389 
Joomla Arabic Unitag ar-AA 2.5.10 2013-04-23 18:00:00-05 AA jooma bna full 2.5.10v1.zi 323.5 KB 1231 
hosting by ar-AA joomla lang ful 2.5.1/3.zp 295.22 KB 4729 
حصو‎ ar-AA joomla lang full 2.5.7v1.zip 325.16 KB 11979 
(Ro CHEN Arabic Unitag ar-AA 2.5 2012-09-19 18:00:00-05 ar-AA joomla lang full 2.5.5v1.zip 880.41 KB 1155 
au MUNERA, ar-AA joomla lang full 2.5.4v1.zip 285.1 KB 4716 
ar-AA joomla lang full 2.5.6v1.zi 300.85 KB 5928 


من خلال الصورة أعلاه نقوم بتنزيل الملف المضغوط للغة العربية باختيار أي نسخة ولتكن آخر نسخة المضللة ونضغط على ذلك الملف وسيتم تنزيا 
الملف المضغوط. 
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من خلال لوحة التحكم نقوم بالدخول باسم المستخدم admin‏ وكلمة المرور التي عيناها مسبقا وسيتم فتح لوحة التحكم التالية: 


Administration 
Site Users ^ Menus Content ^ Components Extensions ^ Help Bovistors di iAdmn 90 Æ View Site O Logout 
— m E 9 v Last 5 Logged-in Users 
o — Name Location ID Last Activity Logout 
Add New Article Article Manager Category Manager Media Manager Menu Manager Super User Administrator 19 2014-05-04 16:56:05 


> Top 5 Popular Articles 
> Last 5 Added Articles 


User Manager Module Manager Extension Manager Language Manager | | Global Configuration 
i ) 
——— e 
Template Manager Edit Profile Joomla! is up-to-date | All extensions are up- 


to-date 


Joomla! 2.5.20 


Joomla!& is free software released under the GNU General Public License. 


من خلال الصورة أعلاه نقوم بالضغط على (Extension Manager)‏ ووظيفتها اضافة اي اضافات للنظام وسيتم فتح الصفحة التالية ; 


Extension Manager: Install 


Install Update Manage Discover Database Warnings Install languages 


Upload Package File 
Package File Choose File | Nc file chosen Upload & Install 


Install from Directory 


Install Directory ^ C^wampwwwjoomla2.5/tmp Install 


Install from URL 


Install URL http Install 


من خلال الخيار (Package File)‏ من خلال الزر (Choose File)‏ نقوم بعمل كليك عليه وسيتم فتح النافذة ومن خلالها نذهب لملف اللغة الذي قمنا 
بتنزيله والضغط على الزر المقابل (Upload & Install)‏ وستظهر الرسالة التالية: 


Install Update Manage Discover Database Warnings Install languages 


[i] Installing package was successful. 


1 العربية الموحدة لنظام جوملا! 2.5.10 الاصدار‎ ARD Aaja 

Arabic Unitag Language Package for Joomla! 2.5.10 version 1 

المعتمد قي جوملا! 2.5 3 TinyMCE‏ تم يتجاح تتصيب حزمة اللغة العريية للمحرر 

TinyMCE‏ خانة اللغة cm‏ ادارة التطبيق المساحد المحرر ]3 تذكر أنه من الواجب الخال كود اللغة العربية 
Upload Package File‏ 


Package File | Choose File | No file chosen Upload & Install 
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نقوم بالرجوع Aa sl‏ التحكم من خلال (Site - Control panel)‏ ومن خلال لوحة التحكم نقوم بالدخول على (Language Manager)‏ كما في 
الضورة؛ 


Administration X1 Joomla!’ 


Site Users Menus Content Components Extensions Help à 0 Visitors & 1Admin € 0 E View Site o Log out 
" m = qm n 
2 — — Ir T E " v Last 5 Logged.in Users 
=F » k 
o d — Name Location ID Last Activity Logout 
Add New Article Article Manager Category Manager Media Manager Menu Manager Super User Administrator 19 2014-05-04 17:13:33 


> Top 5 Popular Articles 


> Last 5 Added Articles 
—— 
& = © X 


User Manager Module Manager Extension Manager Language Manager Global Configuration 
ó 
CTT Y 
Template Manager Edit Profile Joomla! is up-to-date All extensions are up- 
to-date 
PER CATIE 0 
3 
وستظهر الصورة التالية:‎ 
Installed - Site Installed - Administrator Content Overrides 
Num Language Language Tag Location Default Version Date Author Author Email 
1 Q Arabic Unitag (322 4 (العربية‎ ar-AA Site 2.5.10 28March2013 Dr. Ashraf Damra/Abu Nidal and Karim embarek/xmedia dr.d.ashraf(2 gmail.com / maxnew486hotmail.com 
2 © English (United Kingdom) en-GB Site * — 2519 2008-03-15 Joomia! Project adminQjoomla.org 


Display € 20 » 


من خلال الصفحة السابقة نقوم بالضغط على النجمة أمام ARTI‏ العربية وسيتم تعريب الموقع الرئيسي وستظهر الرسالة التالية: 


Installed - Site Installed - Administrator Content Overrides 


Default Language Saved. This does not affect users that have chosen a specific language on their profile or on the login page. 
Warning! When using the multilanguage functionality (i.e. when the plugin System - Languagefilter is enabled) the Site Default Language has to also be a published Content language. 


Num Language Language Tag Location Default Version Date Author Author Email 
1 © Arabic Unitag (العربية المرحدة)‎ ar-AA Site * 2510  28March2013 Dr. Ashraf Damra/Abu Nidal and Karim embarek/xmedia — dr.d.ashraf(2gmail.com / maxnew486 hotmail.com 
2 © English (United Kingdom) en-GB Site 2.5.19 2008-03-15 Joomla! Project admin@joomla.org 


Display # 20 v 
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وسيظهر الموقع الرئيسي كما في الصورة: 


JOOMLA.ORG SAMPLE SITES HOME 


Joornmlat 


Open Source Content Management 


Home أنت هتا:‎ 
!Joomla ! About Joomla 
Congratulations! You have a Joomla site! Joomla makes it easy to build a website just the way you want it and keep it Getting Started 


simple to update and maintain 
!Using Joomla 


Joomla is a flexible and powerful platform, whether you are building a small site for yourself or a huge site with hundreds of 


l 
thousands of visitors. Joomla is open source, which means you can make it work just the way you want it to The Joomla! Project 


The .Inamla! Cammunitv 


تم تعريب الموقع وظهور بعض الاجزاء معربة جاهزة. ننتقل لتعريب لوحة التحكم ومن خلال الصفحة (Language Manager)‏ و الضغط على 
Installed - Administrator)‏ ( وسيتم فتح الصفحة التالية: 


Installed - Site Installed - Administrator Content Overrides 
Num Language uec Location Default Version Date Author Author Email 
28 Marc Dr. Ashraf Damra/Abu Nid hraf@gmail com / 
Arabie Untag (s sd Loy — PPRA 2540 28 March shraf Damra/Abu Nidal and Karim dr.d.ashrafgbomail com 
2 2013 embarek/xmedia maxnew486@hotmail.com 
2 English (United Kingdom) en-GB Administrator Jf 2.5.19 2008-0315 Joomla! Project adminQjoomla.org 


Display € 20 M 


وبنفس الطريقة السابقة نقوم بالضغط على النجمة أما اللغة العربية وسيتم تعريب لوحة التحكم وستظهر كما في الصورة: 


Joomla! الإدارة‎ 


الموقع المستخدمين ER‏ المحتويات التطبيقات الإضاقات المساعدة p‏ لايوجد أعضاء داخل الموقع $E‏ عضو داخل الإدارة gom‏ وع Q uox‏ 


45 AUS " 8 
++ | 08 * مدير اللغات: اللغات المنصبة‎ 
ux لقات المحتوى‎ aa للوحة‎ ALD LaL w سفت سمه‎ 
-Default Language Saved. This does not affect users that have chosen a specific language on their profile or on the login page 
Warning! When using the multilanguage functionality (i.e. when the plugin System - Languagefilter is enabled) the Site Default Language has to also be a published Content lat 
البريد الإلكتروني للمؤلف‎ gal النتسخة تاريخ الإنضاء‎ gan اللغة كود اللغة  المكان‎ aij 
dr.d.ashraf()gmail.com / maxnew486@hotmail.com Dr. Ashraf Damra/Abu Nidal and Karim embarek/xmedia March201328 25410 $% — 29  arAA (العربية الموحدة)‎ Arabic Unitag 1 
admin joomla org Joomla! Project 2008-03-15 25.19 المدير‎ en-GB (English (United Kingdom 2 


عدد أسطر اللائحة: |20 v‏ 
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نعود للوحة التحكم من خلال (الموقع — لوحة التحكم ( وستظهر لوحة التحكم كما في الصورة معربة وجاهزة: 


¥ Joomla! $ Jay! 


الموقع ١‏ المستخدمين ١‏ القوائم ١‏ المحتويات ‏ التطبيقات الإضاقات ١.‏ المساعدة ال الايوجد أعضاء داخل الموقع ي 1 عضو داخل الإدارة € لاتوجد رسائل i mm.‏ ) تسجيل خروج 


2 2 )0 فل we‏ 
o‏ ا الاسم المكان رقم التعريق التضاط الأخير تسجيل الخروج 


مدير القوائم مدير الستخدمين Super User‏ المدير 19 2014-05-04 17:25:07 


us 4‏ 5 مقالات قراءة 


—70 E * © = 


مدير القوالب تعديل الملف الشخصي 


Joomla! 2.5.20 


من خلال لوحة التحكم ندير محتوى الموقع كامل سواء أجزاء المواقع واعداداتها وكذلك شكل الموقع والتحكم بكل جزء فيه وهنا نظرة عامة حول كل 
أيقونة في لوحة التحكم حسب الترقيم وكما في الصورة: 


pd للدت الإضانات‎ popen اض القوائح‎ Se 
&6 25 8 2 
1 ]1ه‎ 5 1 
6 0 
إضافة مقال جديد مدير المقالات هذير المجهوعات هدير الوسائط المتعددة مدير القوائم هدير الستخدهمين‎ 
مدير الموديولات مدير الإضافات مدير اللقات الإعدادات العامة مدير القوالب تعديل الملف الشخصي‎ 
لديك آخر اصدار من كل‎ Duja لديك آخر تسخة هن‎ 


الإضافات 


(إضافة مقال جديد) : من هنا يمكننا إضافة أي خبر أو بيانات لأي قسم. 


(مدير المقالات): من خلالها يتم الدخول إلى جميع الأخبار أو المقالات المضافة في حالة اردنا التعديل أو الحذف. 
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(مدير المجموعات) : من هنا نقوم بعمل القسم وتسمى في جوملا(مجموعة).‎ 
(images) (مدير الوسائط): من خلاله نتحكم بالمجلدات والصور في مجلد‎ 
(مدير القوائم) : نتحكم بالقوائم الموجودة من هنا.‎ 
(مدير المستخدمين) : نتحكم بالمستخدمين من هنا نقوم بالإضافة والتعديل والحذف والايقاف.‎ 


(مدير الموديولات) : الموديولات هي أجزاء الموقع ونتحكم بها من هذه الأيقونة نستطيع تحديد أماكنها ومن أين تستمد بياناتها. 


(مدير الاضافات) : جوملا تقبل أي إضافة سواء موديولات او مكونات او اضافات مساعدة وعن طريق هذه الايقونة ندخل للصفحة التي تقوم بإضافة 
الإضافات وتركيبها. 


(مدير اللغات): نتحكم باللغات للموقع ونستطيع تعيين اللغة التي نريدها للموقع وللوحة التحكم. 
(الإعدادات العامة): نتحكم بالإعدادات العامة للموقع مثل (اتصال قاعدة البيانات — اسم الموقع العام - ايقاف الموقع .. الخ ). 
(مدير القوالب) : نحصل على قوالب جميلة من مواقع تدعم جوملا ومن هنا نقوم بعملية التعديل والتعيين للقالب على الموقع. 
(تعديل الملف الشخصي): وهذه الايقونة خاصة بمدير الموقع لتغيير اعدادات حسابه. 
(لديك آخر نسخة من جوملا!) هنا تظهر هذه الرسالة عندما تكون جوملا لديك آخر اصدار وعند وجود تحديث جديد ستتغير باللون الأحمر (تنبيه). 


(لديك آخر اصدار من كل الاضافات) تظهر عنا عدد الاضافات التي تكون بحاجة لتحديث ويفضل عدم تحديث الاضافات غالباً. 
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إنشاء الأكسام 


في أي موقع إلكتروني لابد من وجود جداول خاص البيانات هنا في جوملا الأمر سهل جدا ويمكننا إنشاء الجداول بالمعني البرمجي ولكن في جوملا تقوم 
بعملها يدويا وتحدد اسم الجدول فقط فمثلا سنقوم وكمثال نقوم بإنشاء أقسام (قسم تصميم الموقع - قسم الجرافكس - قسم الشبكات والصيانة ‏ عام — 


خدماتنا ) والخطوات كالتالي: 


من لوحة التحكم نختار (مدير المجموعات) وستظهر الصورة التالية. 


Suevi! O © © 
T حذف إعادة بناء‎ gad cc | تشر إلقاء التشر‎ des جديد‎ 
LEE NT deas اختيار الحالة - ” | | - اختيار هستوى‎ MET أعلى حد‎ jja 
مستوى الوصول اللغة قم التعريف‎ ES a الاسم الحالة‎ 
1 لحب‎ Public 1 o 
19 الجميع‎ Public o 1 e 
0 الجميع‎ Publi 1 eo 
1 الجميع‎ Public o 1 eo 
الجميع‎ Pubi oo 2 eo 
64 الجميع‎ Public 9 1 © 


= مدير المجموعات: المقالات 


Sample Data-Articles — , 
(sample-data-articles. 7 
1 
Joomla 2 

(joomla ) 

Extensions 
(extensions. ) 

Components 
(components ) 
Modules 


(modules. 


Content Modules 
(articles-modules : 3-2 ai) 


كما نلاحظ في الصورة اعلاه هذه ادارة المجموعات أو الأقسام ونلاحظ الأقسام الموجودة مسبقا (بيانات تجريبية) نقوم الان بعملية الحذف والتأشير كما 
في الصورة على (joomla)‏ ثم الضغط على أيقونة الحذف أعلاه. ونقوم بحذف جميع المجموعات أو الأقسام الى يصير لدينا قسم واحد وهو كما في 


الصورة. 


= مدير المجموعات: المقالات 


© © © © اب ©« © ف $ 
جديد daas‏ تشر إلغاء JAA‏ الأرشيف القحص ʻia‏ إعادة بناء ‏ الخيارات الساعدة 
و 1 ت نت السجموعة الى سلة المحذرقات يتجاح 
اختيار أعلى حد لوصول vY‏ اختيار الحالة- v‏ اختيار مستوى الوصول - al‏ - اختيار M AD‏ 
الاسم Bes gd m‏ مستوى الوصول اللغة usa,‏ 
Public 1 o‏ الجميع 


E‏ المجموحات المقالات المتميزة 
Ju‏ البحت إعادة التعيين 
Uncategorised‏ 


(uncategorised : ja > 


v 20] X430 uium 
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ولعمل الأقسام التي نريدها نقوم بعمل كليك على الأيقونة البرتقالية أعلاه (جديد) وسيتم فتح الصفحة التالية ; 


X1 Joomlat 


لله لايوجد أعضاء داخل الموقع 4p‏ 1 عضو داخل الإدارة .“> لاتوجد رسائل Ọ dex gm‏ تسجيل خروج 


الموقع | المستخدمين | القوانم المحتويات التطييقات | الإضاقات | المساعدة 
= مدير المجموعات: إضافة مجموعة جديدة [x] B5‏ $ 
PM‏ حقظ وإغلاق حفظ وجديد إلقاء الساعدة 
9 4 خيارات النشر 
i‏ تصميم المواقع الإلكترونية 4 الخيارات الأساسية 
الاسم المستعار webdesign‏ 4 خيارات الكلمات المقتاحية 
الأصل - بوت اتشاب v‏ 
الحالة asta‏ 3 
مستوى الوصول v Public‏ 
التراغيص تحديد التراخيمر 
اللخة الجميع v‏ 
قم التعريف 0 
رس 


| Styles ~ Paragraph ~ 
o E y £m 


كما نلاحظ الصورة أعلاه من هنا نقوم بعمل الأقسام الجديد. من خلا الحقل (الاسم) نقوم بعمل اسم القسم» الحقل الذي يليه (الاسم المستعار) وهو اسم 
الرابط الذي سيظهر على شريط العنوان عند فتح القسم ويمكننا تركه فارغا او كتابة اسم القسم باللغة الانجليزية كما في الصورة. الخيار الذي يليه 
(الأصل) وهنا اذا كنا نريد الان نجعل القسم تحت قسم آخر أو فرع Aia‏ مالم نتركه كما هو. 


(الحالة) في حالة اردنا انشاء القسم وجعله مخفي وغير مفعل نقوم باختيار (غير منشور) مالم يكون كما هو عليه (منشور). 

(مستوى الوصول): في حالة اردنا حصر رؤية القسم لفئة معينة في الموقع مثلا المسجلين فقط أو خاص مالم نتركه كما هو. 

(التراخيص) : وهي وضع صلاحيات محددة للمستخدمين. 

(الوصف) : وصف القسم. 

ملاحظة : الحقول التي تكون إلزامية هي المؤشر عليها بالنجمة الحمرا كما في حقل (الاسم) ونكتفي بعمل الاسم فقط . 

بعد عمل القسم أعلاه نقوم بعمل كليك على (حفظ وجديد) وسيتم حفظ القسم التي تم إنشاءه. نقوم بعمل بقية الأقسام بنفس الآلية وسيكون شكل الأقسام 


بعد الانتهاء كما في الصورة: 


suomy ooog — 


المقالات المجموحات المقالات المتميزة 
EET F”‏ عا - اختيار أعلى حد للوصول _ V‏ | - اختيار الحالة - ” | | - اختيار مستوى الوصول - ۳ | | -اختياراللغة-__” 
الاسم الحالة Res uU‏ مستوى الوصول اللقة ‏ رقم التعريف 
ncategori:‏ 
Public o 1 Uncategorised‏ الجميع 


(uncategorised 
FTE E E E, 
الجميع‎ Public oo 2 الإلكثرونر‎ dad يم‎ 
(webdesign 
تصمیم جراقكمر‎ 
== Public oo 3 يم جرافكس‎ 
(graphics 
(net 


9 
e 
o 
80 الجميع‎ Public oo 4 © تيكات وصيانة حاسوب‎ 
[^] 
[^] 


(our-serv 
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كما نلاحظ أعلاه تم حفظ الأقسام الخاصة. 


التحكم بالمجلدات والصور 
دائما قبل البدء في العمل على جوملا وإضافة البيانات لابد من وجود تنظيم وترتيب لعملية إدخال البيانات كالصور والبانرات وهنا سنقوم 
بعملية ترتيب وعمل مجلدات في نظامنا منها ما هو مخصص للصور ومنها ما هو مخصص للبانرات. 


من لوحة التحكم نقوم بعمل كليك على (مدير الوسائط المتعددة) كما في الصورة: 


& rje m 


إضافة مقال جديد مدير المقالات مدير المجموعات مدير الوسائط المتعددة مدير القوائم مدير الستخدمين 
pi - - et‏ 
ستظهر الصورة التالية : 

= - 4 4 
197 مدير الوسائط المتعددة E‏ 08 | >< 
عرض مصقر عرض مقصتل 

المجلدات الملقات 

XJoomio! 0 x x J = 

ri Q banners, 
mpledata jlj û 
99 20 2o0 * a o o 
p by joomla log joomla gre joomla bla sampledata bi 


في مدير الوسائط نستطيع رفع وحذف أي ملفات وإنشاء مجلدات أيضا Bay‏ المجلدات على اليسار سنقوم بحذف الصور التي بجانبها 
بالتأشير عليها ثم الضغط على (حذف). وستظهر كما في الصورة: 


المجلدات الملقات 
a J a‏ 
Q banners Jl)‏ 
sampledatajl) ©‏ 
Beo‏ 
sampledsts banners‏ 


نقوم بعمل مجلد اسمه imgs2014‏ بالنزول قليلا في نفس الصفحة وكما في الصورة التالية: 


C:wampwww'joomla2.5/images‏ 0001014 لحل وجلا 
رقع الملقات (الحجم الأقصى: 10 (MB‏ 


No file chosen | Choose Files | 


بدء الرقع 
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كما في الصورة أعلاه على اليسار نقوم بعمل اسم المجلد ثم كليك على (إنشاء مجلد) وسيتم إنشاءه بعد إنشاءه نقوم بفتحه ثم عمل مجلد 
آخر بداخله باسم 5-2014 بنفس الطريقة. 


إضافة مقالات 
من أهم الاشياء في نظام جوملا هو كيفية إضافة وهنا ستقوم بعملية إضافة مقال وسيكون لدينا بعض المقالات أو البيانات التي سنضيفها وهي كالتالي: 


۳ مقالات مع الصورة تحوي الخدمات الرئيسية التي نقدمها وهي (تصميم المواقع - جرافكس - شبكات وصيانة) . نجهز ثلاث صور وعبارات نصية 
وستكون الإضافة بالطريقة التالية: 


من لوحة التحكم كليك على (إضافة مقال جديد) وستظهر الصورة التالية: 


ntent&view-article&layout-edit Di r4 ż è 5 Z * idi T" (T) 
مدير المقالات: إنشاء مقال جديد‎ o 
EI 
الاسم * تصميم مواقع إلكترونية‎ 
web الاسم المستعار‎ 
v Rai ^ المجموعة‎ 
v الحالة هنشور‎ 
M Public de مستوى‎ 
التراخيص إتحديد,التراخيص‎ 
Y. 3 مميز‎ 
Y الجميع‎ iam 
0 رقم التعريف‎ 
تص المقال‎ 
2-2 1 4 | 2 2 3 ك5‎ | Styles ~ Paragraph > 
= | I ILL dom y Qm 
— AH |x 52 
تقوم رواد التكتولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية‎ 
وفقا لأحدث التصاميم العالمية والآنيقة واستضافتها على سرفرات ذات كفائة عالية.‎ 
Path: p » span á 


كما في الصورة أعلاه الحقل (الاسم) نضع العنوان المناسب للمقالة أو الخبر أو أي شيء. (الاسم المستعار) كما ذكرنا سابقا الاسم المستعار هو الاسم 
الذي سيظهر في نهاية الرابط ويمكن تسميته بأي اسم باللغة الانجليزية أو ارقام عشوائية او تركه. (المجموعة) وهنا يجب الانتباه عند إضافة أي مقالة 
نختار القسم المناسب لها كما في الصورة اخترنا قسم (خدماتنا). الخيارات في (الحالة) نتركها كما هي عليه (منشور) . الحقل (مستوى الوصول) لو 
اردنا تخصيص المقال للمسجلين مثلا وحصره على مجموعة معينة ويتم تركها كما هي غالبا. (التراخيص) وهي مجموعة الصلاحيات للوصول لهذه 
المقالة من حيث التعديل او الحذف هذه الخاصية لا تستخدم بكثرة وتترك كما هي. 


(مميز) وهذه خاصية تستخدم في بعض القوالب القديمة بحيث يتم عمل زر (إقرا المزيد) في المقالة وتعيينها كمميز وتظهر في الصفحة الرئيسية لكن 
الان يتم ترك الخيار مميز كما هو عليه نظرا لوجود موديولات تقوم بنفس عمله. (نص المقال) وهو الأهم وكما نلاحظ كتبنا مقال معين حول العنوان 
الذي أدخلناه. 
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نقوم الآن بإضافة صورة وهو عمل كليك في بداية المقال وانزاله سطرين والعودة الى السطر الأول بمؤشر الفأرة لكي يتم ادراج الصورة في ذلك المكان 


أي في السطر الأول كما في الصورة: 


تص المقال 
Styles ~ Paragraph >‏ | 


57 E F Qu 


تقوم رواد التكتولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية 
وفقا لأحدث التصاميم العالمية والأنيقة واستضافتها على سرفرات ذات كفائة عالية. 


Path: p 


Á 
JPA تبديل‎ box إدراج صورة ا فاصل الصفحات‎ | p | إدراج رابط مقال‎ 


إدراج صورة 


نلاحظ في الصورة اعلاه وجود الزر (إدراج صورة) نقوم بعمل كليك عليها وستظهر النافذة التالية 


sampledata imgs2014 banners 


عند اختيار 'بدون تعيين', سيتم تحديد الإصطفاف بواسطة الصتف class)‏ 


"img. caption.none‏ يستخدم عادة لضبط (تمركز)» الصورة في مركز الصفحة. 


إذا تم الضيط على 'نعم', سيتم استخذام اسم الصورة كوصف للصورة. 


رقع الملفات (الحجم الأقصى: 10 (MB‏ 


No fle chosen | Choose Files | 


كما نلاحظ في الصورة أعلاه تظهر المجلدات والمجلد الذي أنشأناه سابقا نقوم بالضغط عليها وسيظهر المجلد الاخر الذي انشأناه والذي هو ٠١١4-5‏ 


نقوم بفتحه ايضا وسيظهر كما في الصورة : 


MOBILE: 00967 714490030 


مجلد | i imgs2014/5-2014/‏ إدراج | | إلغاء 


ه لم_يتم العثور_على الصورة 


عتد اختيار 'بدون تعبين', سيتم تحديد الإصطفاف بواسطة الصتف Class))‏ 


"img caption.none |."‏ يستخدم عادة لضبط (تمركز): الصورة في مركز الصفحة. 


(MB 10 رقع الملفات (الحجم الأقصى:‎ 
No file chosen | Choose Files | 


بدء الرفع 


كما في الصورة اعلاه تم فتح المجلد 7١١4-5‏ وهو فارغ في الجزء السفلي من النافذة تحت (رفع الملفات الحجم الاقصى ٠١‏ ميقا بايت) نضغط على 
زر (اختيار ملفات) أو (Choose Files)‏ ستفتح نافذة أخرى ومنها نذهب لمكان الصور التي سنضيفها في المقال او المقالات والضغط على (رفع) علما 
ان هنا يمكننا إضافة أكثر من صورة ولو لمقالات أخرى. سنضيف ثلاث صور ونبدأ الرفع وستظهر كما في الصورة: 


imgs201415-2014slide3.png| تم اكتمال الرفع:‎ "T 


ci imgs2014/5-2014/ | مجلد‎ 


e EB عخا‎ 


slide3.png slide2.png slide1.png 


كما في الصورة أعلاه لإدراج صورة ضمن المقال نقوم بعمل كليك على الصورة التي نريد إدراجها ثم نضغط (إدراج) في الأعلى على اليسار وستظهر 
الصورة داخل المقال كما في الصورة: 
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ب‎ 
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m 
ihi 
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تقوم رواد التكنولوجيا بتصميم المواقع الالكترونية الرسمية بانواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية 


وفقا لاحدت التصاميم العالمية والاتيقة واستضافتها على سرفرات ذات كفائة عالية. 


Path: p » img 


gg dea] [pais |.فاصل الصقحات‎ [EE راج مورد‎ 


نقوم الان بعمل Bia)‏ وجديد) ونقوم بعمل مقالتين ايضا بنفس الآلية وفي نفس القسم (خدماتنا) والمقالتين التي سنضيفهن (تصميم جرافكس - شبكات 


وصيانة حاسوب) وسيكون شكل المقالتين بعد الاضافة كما في الصورة: 


BUS ROO © © 


مدير المقالات: المقالات 


MEET v _ البحت | | إعادة التعيين اختيار مستوى الوصوا ¥ اختيار المؤلف‎ Ju 
رقم التعريت‎ m المجموحة تاريخ الإتشاء عدد الزيارات‎ P الحالة‎ ER 
er Use Admini: r Componeni 
1 الجميع‎ 2 2011-01-1 Components eo EES 
oomi administrator-components 
Super User Archive Modul 
te 5 2011-01-01 Public Content Modules © chive Module 
Uoomla (archive-module 
Article Categories Module 
== 6 2011-01-01 Super User Public Content Modules eo : 
(article-categories-module 
Super User Articles Category Module 
4 الجميع‎ 10 2011-01-1 toonis Pubi Content Modules e ps 


(articles-category-module 


ستضيع المقالات التي أنشأناها بين المقالات التجريبية التي تكون ضمن جوملا ولكي نظهر المقالات في القسم الذي نريده كما نلاحظ أعلاه نختار القسم 
أو المجموع كما في الصورة أعلاه وبعد اختيار المجموعة ستظهر المقالات كما في الصورة: 
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4 4 يو e‏ 
مدير المقالات: المقالات A d O‏ >< 
جدید jm me‏ إلقاء التشر ju‏ الأرثيف gaid‏ حتف الخيارات الساعدة 
المقالات المجموعات المقالات المتميز 
Um‏ البحت إعادة التعيين اختيار الحالة - _ (Y‏ | خنمها | | - اختياو أعلى حد للوصول _ Y‏ | | - اختيار مستوى الوصول 7 ] |-اختير المؤلف_” | | - اختيار اللغة - _ v‏ 
ES‏ الحالة ممين المجموعة الترتيب مستوى drap‏ أنشئ بواسطة تاريخ fA‏ تدد الزيارات pul‏ رقم التعريف 
تصميم جرافكمر 
d‏ خدماتتا 1 Super User Public‏ 2014-05-08 0 الجميع 
١ ú o 03-17-08-05-2014‏ 9 
تصميم مواقع FSI‏ 
Super User Public 2 Lala. eo MAS eue‏ 2014-05-08 0 الجميع 71 
(web )‏ 
تبكات وصياتة حاسوب 
Super User Public 0 uua eo ^ nd‏ 2014-05-08 0 الجميع 


26-04-17-08-05-2014( 
إضافة مقالات للأقسام التي أنشأناها سابقا 


سابقا أنشأنا أقسام وهي (تصميم المواقع — تصميم الجرافكس - شبكات وصيانة — عام ). وأنشأناها كي نقوم بعمل مقالات لكل قسم سنقوم بعمل مقالتين 
في كل قسم ثم عمل Y‏ مقالات في قسم عام وهي (من نحن - اتصل بنا ) وسنحتاجها في بناء الموقع لاحقا لأن عدم وجود بيانات ولو حتى افتراضية 
(تجريبية) لن تستطيع العمل على الموقع بشكل سليم وتجرب كيف يتم عرض البيانات وما الى ذلك. 


القوالب (Templates)‏ 
تعتبر القوالب من اهم الاضافات للنظام جوملا كونها تمثل واجهة الموقع والقوالب موجودة بكثرة وتدعم جوملا ويمكن الحصول عليها من المواقع 
الداعمة لجوملا. ويمكن البحث عنها (Joomla Templates)‏ 


يوجد قوالب جوملا مجانية وقوالب أخرى غير مجانية ومن المواقع الداعمة للقوالب: 


joomla-monster.com - zootemplate.com - yootheme.com - hotjoomlatemplates.com)‏ ( وهنا مثال لأحد القوالب التي 


سنطبق عليها: 
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Specira 


SHAPER APPS 


Our latest Works 


z | 


T‏ 5 حم حدم 


لدينا هنا أحد القوالب المدفوعة (غير المجانية) سيتم ارفاقه مع تطبيقات الكتاب. سيتم تنزل القالب إلى الجهاز ثم تركيبه على الموقع الخاص بنا جوملا 
وطريقة التركيب كالتالي: 


من لوحة التحكم (مدير الإضافات). 
اختيار ملف. ومن هنا نختار القالب كما نزلناه من الموقع الرسمي للقالب. 
بعد اختيار القالب يتم الضغط على (رفع وتنصيب) وسيتم التركيب وظهور رسالة النجاح في عملية التركيب. 


ولتعيين القالب الذي اخترناه للموقع نذهب من لوحة التحكم نختار (مدير القوالب) وستظهر الصورة التالية: 


4+ " å 
+> AB E Q * مدير القوالب: الأنماط‎ 
ات | المساعدة‎ ci pa ليللا لاقتراضي تعديل — تسخة طبق‎ 
الأنماط القوالبي‎ 
Y uin اختيار‎ - | [v القلب‎ jns البحت | | إعادة التعرير‎ Ju) 
Een RE "Y pee] jsa E 
e Atomic Atomic - Default E 
eo Beez5 الموقع‎ Beez5 - Default FE 
114 eo Beez 20 الموقع‎ Beez2 - Parks Site E 
[^] * Beez 20 الموقع‎ Beez2 - Default E 
* Bluestork m Bluestork - Default E 
Hathor المدير‎ Hathor - Default '* 
115 Shaper spectra Ud £z BY -shaper spectra E 7 


من خلال الصورة أعلاه. نضغط على shaper_spectra)‏ - الإفتراضي) للدخول على اعدادات القالب وتعيينه كافتراضي للموقع من خلال الصفحة 


^ 


التاليه: 
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مدير القوالب: تعديل النمط E 5B v‏ © $¢ 


E‏ حقظ وإغلاق usiha‏ إغلاق المساعدة 
التقاصيل 
Basic v‏ 
اسم التمط * a Y! - shal spectra‏ 9 : 
Jy per spec R‏ م Tet O Image ® Logo Type‏ 
القالب shaper_spectra‏ 
Helix Logo Text 5‏ 
الافتراضي 0 3 
T E Logo Slogan‏ 
رقم التعريف gi 115 H‏ 9 سے 'emplates‏ 
وصف القالب Logo Width (English (UK‏ 260 
[E Logo Height Shaper Spectra‏ 
„Joomla 2.5 Template by www.joomshaper.com‏ 
Y Left + Content + Right Layout Type‏ 
JoomShaper‏ 
960px Main Body Width‏ 
Left Column Width -Premium and powerfull ie ra €—‏ 200 
 2e0 Right Column Width‏ 
١ -See a live demo of all JoomShaper templates‏ 
Inset Width http://demo.joomshaper.com‏ 100 
Inset2 Width 5 95‏ 100 
Overview of Helix‏ - 
Pixel € Percent O Width Unit‏ 


: 9 Imagine yourself dwelling in a world of super fast website building capacity. 

Y 9 Fixed columns height You just see it fully grown up even before you feel that you have just started‏ @ تعم 
building it! Helix Framework is here to make you feel the difference in the world‏ 

of website designing. This product has been developed by JoomShaper, your 

Y Sylet Preset Styles trusted friend in the Joomla world, for an easy accessibility to the way of 

„building Joomla based websites with hundreds of easy tasking features‏ ج 


Yes © No O Show Copyright Info What does it intend to do? Well, it is as simple as this question- it will make 
your experience of creating website much smoother than ever before. Helix 
Framework aims to open all the possible doors to you to create highly 


D Copyright Info 
| HRADWE عجوو‎ scies ida sophisticated website in less time. It has come with built-in CSS and 


534 د جم‎ Daserradi 


من خلال الصورة أعلاه عند خيار (الافتراضي) نختار الجميع. ثم نقوم بالنزول إلى اسفل الصفحة وستظهر الصورة التالية: 


€ جه‎ Q | [!localhost/jnomla2.5/administrator/index php?option- com templates&view-style&layout-edit&id- 115 Y E * 5 72 tor (1) E 


Yes © No © Show Copyright Info What does it intend to do? Well, it is as simple as this question- it will make u 
your experience of creating website much smoother than ever before. Helix 
جص‎ = i Framework aims to open all the possible doors to you to create highly 
Col ht Info 
ا ی ی تقد‎ m sophisticated website in less time. It has come with built-in CSS and 
3 | 1JavaScript compression for you to make it unbelievably faster 


تعيين القوائم 
opum‏ تبديل التحديد Yes © No © Show Helix Logo‏ 
Y Light Small Logo Helix Logo Type Australian Parks. About Joomla‏ 
(Designed by [JoomShaper Designed by Parts Home-gy Gelling Started - gg‏ 
Park Blog -0 !Using Joomla -0‏ 
و - - Write a Blog Post-0) Using Extensions‏ 
Menu 4 Image Gallery -£ Components ---‏ 
Content Component- - - -|-;‏ وج - - Fonts 4 Animals‏ 
Advanced 4 Scenery --(3 Single Article - -‏ 
Park Links -0 Article Categories - - - - -|‏ 
Article Category Blog - -‏ 
Frei Shop Article Category List- -‏ 
Wo. Featured Articles - - -- -‏ 
Aiba Aldea - -‏ وس - Fruit Encyclopedia‏ 
Submit Article - -‏ — 
وج - - - GantscUs- a Contact Component-‏ 
Login - gg Contact Categories - - - - -@)‏ 
dnd "B Contact Single Category - -‏ 
Neue. Single Contact-----‏ 
Recipes -g Featured Contacts - -‏ 
Main Menu Weblinks Component -‏ 
Home -5 Submit a Weblink - - -- -‏ 
Weblinks Single Category - -‏ وح - Site Map‏ 
Articles - -B Weblinks Categories‏ 
Weblinks - -[- News Feeds Component - 5‏ 


من خلال الصورة أعلاه نقوم بالضغط على (تبديل التحديد) ليتم التحديد على جميع المربعات الخاصة بالقوائم كما في الصورة : 
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تعيين القوانم 
n‏ تبديل التحديد Yes © No Show Helix Logo‏ 
Light Small Logo Helix Logo Type Australian Parks About Joomla‏ ¥ 
Getting Started - 3)‏ وي - [Designed by {JoomShaper Designed by Parks Home‏ 
Using Joomla - i‏ وي - Park Blog‏ 
Using Extensions - -iĝ‏ بي - Write a Blog Post‏ 
Components - - - G)‏ بهي - Menu 4 Image Gallery‏ 
Fonts 4 Animals -- Content Component - - - - R)‏ 
Advanced 4 Scenery -- v Single Article - - - - - A‏ 
Article Categories - - - -- 5‏ وي - Park Links‏ 
Fruit Shop tide Category mag T v‏ 
Article Category List- - - - - v‏ 
Welcome - gg Featured Articles - - - - - v‏ 
Fruit Encyclopedia - (j fich d Aditlks «e c- "‏ 
c—  ' Submit Article - - - -- »‏ 
Contact Component - - - - j‏ — 
Login- gg Contact Categories - - --- T‏ 
Diedione -ig Contact Single Category - - - - - e‏ 
"on pid w Single Contact- - - - - 9‏ 
Recipes i Featured Contacts - - - - - v‏ 
Main Menu Weblinks Component - - - - i‏ 
Home - gj Submit a Weblink - - - - - v‏ 
Site Map - gı Weblinks Single Category - - - - - v‏ 
Weblinks Categories - - - - - A‏ وج - - Articles‏ 
ا - - - - Mteblintee. News Feeds Component‏ 


بعد عمل الخطوة السابقة نقوم بعمل (حفظ وإغلاق) وسنقوم بالضغط على (معاينة الموقع) اعلى لوحة التحكم على اليسار وسيظهر الموقع كما في 
الصورة: 


© | [3 localhost/joomla2.5/ 


Helix framework not found. 


من خلال الصورة أعلاه لم يتم فتح الموقع وظهور رسالة خطأ وتعني تحميل (framework)-!‏ الخاص بالقالب والموجود في نفس الموقع الذي نزلنا 
منه القالب وسنقوم بتنزيله. بعد تنزيل (plg system, helix j25)-!‏ نذهب من لوحة التحكم إلى (مدير الاضافات) ونقوم برفعه وتركيبه كما قمنا 
بتركيب القالب. ثم نعود للوحة التحكم ومن القائمة (الاضافات) ثم (مدير التطبيقات المساعدة) لتفعيل (framework)-!‏ كما في الصورة: 


e Q | D localhost/joomla2.5/administrator/index.php i 34 x FOZ €& e t D 


¥ Joomla! 


d‏ لايوجد أعضاء داخل الموقع dp‏ عضو داخل الإدارة dese gm p scere‏ تسجيل خروج 


A 9‏ > آخر 5 أعضاء قاموا يتسجيل الدخول 
DL‏ 
o‏ ت الاسم المكان رقم التعريف التشاط الأخير تسجيل الخروج 
إضافة مقال جديد مدير المقالات مدير القوائم مدير الستخدمير m Super User‏ 19 2014-05-08 09:24:00 


uS >‏ 5 مقالات قراءة 


- @ × سم ا م =- 


ستظهر الصفحة التالية: 
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www.techpio.net 
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YAA 


Siga‏ المستخدمين <١‏ القوائم | المحتويات اتطبيقات الإضاقات ١‏ المساعدة d‏ لايوجد أعضاء داخل الموقح 1d‏ عضو داخل الإدارة € لاتوجد رسائل gm‏ معاينة الموقع Ọ‏ تسجيل خروج 
f 2 $.. bh sz BINE,‏ 45 
* مدير التطبيقات المساعدة: التطبيقات المساعدة - © «v A Y O‏ 
ium‏ ناعم[ البحت | | إعادة التعيين اختيار الحالة EN‏ * | | - اختيار مستوى الوصوا v‏ 
اسم التطبيق المساحد الحالة Cart 5 "T‏ ارم 
s EESS —‏ ل التعريف 
المصادقة - جوملا © Public joomla authenti‏ 1 
مصادقة - b gma authentication o GMail‏ 
توتيق - ithenti o LDAP‏ 
التحقق - Public recaptcha captcha o ReCaptcha‏ 


من خلال الصورة أعلاه ستكون الاضافات المساعدة كثيرة ولتوفير الوقت في البحث نكتب عبارة ضمن اسم الاضافة التي نبحث عنها في حقل الفلترة 
كما في الصورة ونكتب ولو جزء من الاسم كما كتبنا (helix)‏ ثم نضغط (البحث) وستظهر النتيجة كما في الصورة: 


¢$ مدير التطبيقات المساعدة: التطبيقات المساعدة © © © ¥7 نتن‎ M 


v - اختيار مستوى الوصول‎ v إعادة التعيين اختبار الحالة- 7 اختيار التو‎ " elio 3nd 
ET "T m Rp» اسم التطبيق المساعد الحالة الترتيب‎ 
الوصول‎ 
100 Public o System - Helix Framework 


نلاحظ ظهور الاضافة وأمامها إشارة حمراء. نقوم الان بعمل كليك على الاشارة الحمراء وستتحول على اللون الأخضر ويعني هذا تفعيل الإضافة 
الخاصة بالقالب. سنفتح الموقع وسيكون كما في الشكل: 


Example Pages Site Administrator Sample Sites Login Site Map Home 


Specira 


كما نلاحظ كيف ظهر الموقع وهو شبه فارغ. 


24-3 ++ * f 

(Module Positions) أماكن الموديولات‎ 

عند تحميل القالب تكون الشركة المصممة للقالب قد عرض في صفحتها مميزات القالب واجزائه ومكوناته ولذلك فلابد عند تنزيل أي قالب معرفة 
(Positions)-!‏ الخاصة بالقالب ليتم وضع المودويلات المناسبة لها والقالب الذي قمنا بتنزيله يحوي خارطة بهذه الأماكن وهي كما في الصورة: 
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YN. 


panel panel2 panel3 panels panels panel6 
Logo — 
slides 
useri user2 user3 user4 users user 
slide1 
left right 
user-top 
lefti left2 contenti content2 contenta content4 right1 right2 
left-mid feature-top right-mid 
left3 left4 featuret feature2 feature featured right3 right4 
left-bottom feature-mid right-bottom 
features featureó feature? features 
eti feature-bott. inset2 
pathway 
mainbody/component 
utility top 
utility utility2 utility3 utility4 
utility-bottom 
contents content content& content8 
user-bottom 


breadcrumbs 
bottom bottom2 bottom3 bottom4 botom5 bottom6 


كما نلاحظ الأماكن في الصورة أعلاه والمسجلة في الصورة عند تركيب الموديولات يتم وضعها هناك. 


تركيب الموديولات 
الموديولات كما عرفناها مسبقا هي اجزاء المواقع الالكترونية والتي يتم ضبط اعداداتها وتحديد مكان ظهورها في الموقع. هناك أنواع كثيرة من 
الموديولات كلا حسب وظيفتها : (موديولات جامدة - موديلات ديناميكية ). 


موديولات جامدة : موديولات يتم وضعها في مكان معين في الموقع ولا تستمد بياناتها من قاعدة البيانات وسيتم العمل عليها لاحقا مثل عمل بانر أو 
صورة أو إعلان معين. 


موديولات ديناميكية: موديويلات يتم وضعها على الموقع وتستمد بياناتها من قاعدة البيانات من خلال قسم معين داخل الموقع مثل (موديولات الأخبار 
الرئيسية — موديول آخر الأخبار .. الخ). 


سنقوم الآن بالبحث عن مودويلات مناسبة للموقع الذي نعمل عليه الان وسنبحث عن موديول سلايدشو ليكون في الصفحة الرئيسية. بعد البحث في 
المواقع الداعمة لجوملا سيكون لدينا مودويلات جاهزة مثل : 


(mod. wowsliderl)‏ سلايدشو, 


(mod. news. show. sp2)‏ لعرض الأخبار. 
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YN 


(mod, sp. simple gallery)‏ عارض صور بسيط, 


(mod sp simple youtube j25)‏ عرض مقطع من يوتيوب حسب الاختيار. 


بداية نقوم بتركيب الموديل الأول وبنفس طريقة تركيب القالب (مدير الاضافات - اختيار الملف - رفع وتنصيب) . بعد التركيب من لوحة التحكم نذهب 


ل(مدير الموديولات) وستظهر الصورة التالية: 


س 0 . |[ | 45 
LL‏ مدير المويولات: الموديولات يو 08 | >< 
pu 7‏ تعديل تسخة طبق jai‏ تشر إلغاء التشر القحصر حذف الخيارات الساعدة 
Ju‏ البحت إعادة التعيين MIT‏ اختيار الحالة - _ v‏ اختيار الموضع M‏ اختيار التوع jji] |Y‏ مستوى الوصول - ۳ | | - اختيار اللقة r‏ 
الاسم الحالة ERA‏ الترتيب التوع الصفحات مستوى ESI drag‏ رقم التعريف 
o WOWSlider Module‏ 'شيء Public Lai) eet WOWeSIider Module1 0 lei)‏ الجميع 


cad أرشيف‎ 1 


Archived Articles‏ © لاشيء (تقعيل فوري) 


من خلال الصورة أعلاه نلاحظ الموديول (WOWSlider)‏ وامامه العلامة الحمراء نقوم بالدخول على الموديول بالضغط على اسمه وستظهر الصفحة 


التالية: 


التقاصيل 
الاسم * WOW Slider Module‏ 

إظهار العنوان © إظهار 559 

الموضع ME stomic-bottomleft‏ —— — 
الحالة غير منثور ۳ 


M Public 
v — WOWSlider Module1 .1 
23 | 00:00:00 0000-00-00 
= 
23 


00:00:00 0000-00-00 


M الجميع‎ J 
ملاحظة‎ 

رقم التعريف 87 WOW Slider Module1‏ الموقع 

WOW Slider Module 1 - This module will show image slideshow created with وصف الموديول‎ 


WOWSIlider 


كما نلاحظ الحقل (الاسم) بإمكاننا تعديل الاسم وتسميته بأي اسم اخر (١‏ إظهار العنوان ( في حالة اختيار إظهار سيتم عرض الاسم في الموقع لذا هنا 
سنختار (إخفاء) . الموضع وهو الاهم من خلال الخريطة الخاصة بالموقع تبين لنا ان هنا مكان مناسب للسلايدشو أو هذا الموديول وهو المكان الذي 
يحمل الاسم (slides)‏ ثم (الحالة) ونختار منسور ثم نترك الخيارات المتبقة وستكون الاعدادات كما في الصورة: 
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|y‏ | تحديد الموضع 


الموقع 


التقاصيل 

WOW Slider Module1 * الاسم‎ 

إظهار العنوان © إظهار O‏ إخقاء 

3 atomicbcttomleft| | slides الموضع‎ 
M NC الحالة‎ 

v Public. مستوى الوصول‎ 

v  WOWSlider Module! .1 a 

بداية التتر 0000-00-00 00:00:00 | 23" 

تاریخ اتتهاء النثر 00002030 200500 | S‏ 

اللغة الجميع M‏ 

ملاحظة 

WOW Slider Module1 87 رقم التعريف‎ 

WOW Slider Module 1 - This module will show image slideshow created with وصف الموديول‎ 


User Menu Top 


Main Menu 


WOW Slider 


وننتقل للجزء الثاني من الاعدادات اسفل الصفحة كما في الصورة: 


100 
تعيين الموديول على الصقحات لمحددة فقط M‏ 
قائمة الاختيار: تبديل التحديد الغاء التحديد | | تحديد الكل 


Fruit Shop Australian Parks About Joomla 


تبديل التحديد || الغاء التحديد | | تحديد الكل 
Home -‏ 
Site Map -‏ 
Articles - -‏ 
Weblinks - -‏ 
Contacts - -‏ 

Login - 

Sample Sites - 
Parks - - 

Shop -- 

Site Administrator - 
Example Pages - 


E E) 0ه‎ & €& €& €) € & 2 S 


من خلال الصورة أعلاه الخيار (تعيين الموديول) نختار (على الصفحات المحددة فقط) ثم نضغط على Main Menu‏ وإختيار (Home)‏ ثم حفظ 
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وإغلاق ونذهب لرؤية الموقع وسيظهر كما في الصورة: 


www.techpio.net 


TNT 


Specira 


تم تركيب الموديول الخاص بالصور علما أن الموديول تم عمله ببرنامج (WOW Slider)‏ حيث يقوم البرنامج بعمل سلايدات لجوملا وأيضا كسلايد 
عادي يتم تركيبه كما فعلنا ذلك في تطبيق (PHP)‏ ويمكن الحصول على المزيد من الموديولات من هذا النوع على الرابط : 


(http://extensions.joomla.org/) 


يتم التعامل مع بقية الموديولات بنفس الطريقة بعد تنصيبها على جوملا ومن الموديول السابق نرى أنه جامد أي لا يأخذ الصور والبيانات من قاعدة 
البيانات ولهذا سنقوم بعمل موديل آخر في نفس المكان وإيقاف السابق. ويمكن إيقافه بواسطة (مدير الموديولات) والضغط على الاشارة الخضراء. 


لدينا الموديول (mod slideshow. pro sp2)‏ نقوم بتركيبه على الموقع بنفس تركيب السابق من (مدير الإضافات) وبعد التنصيب من لوحة التحكم 
كليك على (مدير المديولات) وسيظهر كما في الصورة: 


Slideshow Pro SP2‏ © لاشيء (تفعيل فوري) 0 e Slideshow Pro SP2‏ (تقعيل فر 


كما في الصورة اعلاه نضغط على الموديول (Slideshow Pro SP2)‏ وسيظهر الموديول كما في الصورة: 
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V4 


mod slideshow pro sp2 مدير الموديولات: الموديول‎ 


التفاصيل 

Slideshow Pro 2 * الاسم‎ 

إظهار العنوان إظهار S‏ 

الموضع M stomio-bottomleft slides‏ تحي لمزرصع 

v a الحالة‎ 

M Public مستوى الوصول‎ 

v Slideshow Pro SP2 .1 الترتيب‎ 

23 | 00:00:00 0000-00-00 ge rem 

تاريخ انتهاء النتر 0000-00-00 00:00:00 | 23" 

v الجميع‎ ám 

ملاحظة 

رقم التعريف 88 2 Slideshow Pro‏ الموقع 
ا وصف الموديول 2 SlideShow Pro‏ 

تعيين الموديول على الصقحات لمحددة فقط M‏ 

قائمة الاختيار: تبديل التحديد || الغاء التحديد | | تحديد الكل 


User Menu Top Main Menu Fruit Shop Australian Parks About Joomla 


تبديل التحديد ‏ الغاء التحديد ‏ تحديد الكل 
2 بي - Home‏ 


كما في الصورة والجزء الأول من الاعدادات على اليمين (الاسم) وهو اسم الموديول ويمكن تغييره (إظهار العنوان) اخترنا إخفاء. (الموضع) slides‏ 
.(الحالة) ونختار منشور وليس غير منشور. نترك بقية الخيارات وننتقل للأسفل تعيين القائمة ثم (تعيين الموديول) ونختار (على الصفحات المحددة 


MOBILE: 00967 714490030 
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(Home) ونختار‎ (Main Menu) فقط) ثم‎ 


الجزء الثاني من الاعدادات على اليسار: 


Module Class Suffix 


560 Width 


370 Height 


» Data Source 


» Slideshow Options 


» Navigation Options 


< متقدمة‎ cu! uà 


il: i i T io.net 


Yvo 


الخيارات الأساسية: هنا نقوم بتعيين الطول والعرض : بحيث العرض (Width)‏ ونحدد 15٠0‏ ثم الطول (Height)‏ حددنا « Jiu Y V‏ للجزء الآخر من 


: Data Source الاعدادات‎ 


v Joomla Content Source 


Uncategorised Category 


v Joomla! Ordering Ordering 

v Ascending Ordering filter 

M Anyone Authors 
v إظهار‎ Featured Articles 
3 No. of slides 

md ê Y Show title 

E y e Title linked 

m y € Show date 

mi €. Y Show article 

ai e 3 Show image 

Y € Image Linked‏ نعم 


الخيار الأول نختار مصدر المحتوى Category .(joomla)‏ وتعني القسم أو المجموعة ونختار (خدماتنا). Ordering‏ وهنا نختار آلية الترتيب مثلا 
حسب التاريخ» العنوان « الانشاء. (Ordering filter)‏ ومعنا نوع الترتيب إما تصاعدي أو تنازلي. (Authors)‏ تحديد المؤلفين للمقالة او من 
ادخلوها. (Featured Articles)‏ وتعني المقالات المميزة. (NO. of slides)‏ تعني عدد الشرائح. بقية الخيارات كما هي مضبوطة أعلاه ويمكن 
قراءتها وترجمتها وستتعرف على وظائفها إلى نهاية الاعدادات. 


الجزء االباقي: 
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Show readmore button 


Readmore text 


No limit Character Word ® Limit title as 
8 Title limit 

No limit Character Word ® Limit description as 
11 Description limit 

axi y € Aspect ratio 

451 Thumbnail width 

314 Thumbnail height 


بقية الإعدادات كما هي مبينة أعلاه « يتم الانتقال الجزء من الإعدادات (Slideshow Options)‏ : 


» Slideshow Options 
» Navigation Options 


خيارات متقدمة < 


v Slideshow Options 


v Default Layout 
v cover-inplace-fade Annimation type 
5000 Interval 

200 Speed 

v Expo.easeOut Animation transition 


» Navigation Options 


خيارات متقدمة < 


یار 


كما نلاحظ أعلاه إعدادات السلايدشو (Layout).‏ وتعني شكل السلايدشو (Animation type):‏ نوع الحركة. (Interval)‏ وتعني مقدار الوقت بين 


كل شريحة. (Speed)‏ سرعة الحركة. (Animation transition)‏ نوع حركة التنقل بين السلايدات. 


يتم ترك الإعدادات (Navigation transition)‏ و (خيارات متقدمة) ويتم الحفظ. وسيكون شكل الموقع كما في الصورة: 
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www.techpio.net 


YNN 


Specira 


c‏ الصبيانة للحاسيات والت 


ملاحظة (ظهور السلايدشو بهذا الشكل لا يعني ظهوره بنفس الشكل ايضا في بقية القوالب وذلك لأن الموديول لديه كلاسات منشأة سابقا للموديول نفسه 
لأن الموديول والقالب تم إنشائهما من نفس الشركة). 
تركيب مدويول :(mod, news. show. sp2)‏ مازال موقعنا شبه فارغ ايضا من الأجزاء في الواجهة الرئيسية وبعد اطلاعنا على ) Module‏ 


5 هناك مكان مناسب لعرض موديل إخباري له اسلوب معين في عرض البيانات وهو News Show SP2‏ وسيتم تركيبه في المكان 


.(user2) 


نقوم بتركيب الموديول في جوملا أولا من (مدير الاضافات) ومن ثم نذهب لمدير الموديولات وسيظهر كما في الصورة غير منشور وأمامه الاشارة 


: الحمراء‎ 
رقم التعريت‎ Am dpa E الصفحات‎ go الترتيب‎ PPP  ةلاحلا الاسم‎ 6 
89 الجميع‎ Public لاشيء (تقعيل قوري)‎ News Show SP2 0 قوري)‎ dai) لاشيء‎ o NewsShowSP2 ® 
27 الجميع‎ Public Ml (تقعيل فوري) 1 أُرشيف المقالات المحدد‎ e Y o Archived Articles — (.) 


نقوم بفتح الموديول وسيظهر كما في الصورة بعد تعيين ما يلزم: 


الجزء الأول من الاعدادات قمنا بعمل المكان في الموضع وحددنا (user2)‏ ثم الحالة (منشور). ثم انتقلنا للجزء السفلي (تعيين القائمة) اخترنا (على 
الصفحات المحددة فقط) وايضا قمنا بالتأشير على عنصر القائمة (Home)‏ وكما في الصورة التالية: 
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التقاصيل 

| m News Show SP2 * الاسم‎ 

sup © Jum © إظهار العتوان‎ 

ene [ M atomio-bottomleft | | user2i الموضع‎ 
| 0 FT الحالة‎ 

E Public مستوى الوصول‎ 

| News Show SP2 .1 الترتيب‎ 

بداية التتر 0000-00-00 00:00:00 | a,‏ 

تاريخ انتهاء النتتر 0000-00-00 00:00:00 | 233( 

LEN] ian 

ملاحظة 

رقم التعريف 89 News Show SP2‏ الموقع 
وصف الموديول 3.2 JoomShaper News Display/Slider Module for 2.5 and‏ 
تعيين القاتمة 

تعيين الموديول | على الصفحات لمحددة قط [Y‏ 

قائمة الاختيار: تبديل التحديد الغاء التحديد | | تحديد الكل 


User Menu Top Main Menu Fruit Shop Australian Parks About Joomla 


تبديل التحديد | | الغاء التحديد | | تحديد الكل 


Home "(vj 


الجزء الثاني من التعديلات: 


home Unique ID 

v Joomla Content Source 

» Category 

v Created Date Ordering 

v Ascending Ordering filter 

v Anyone Authors 

Y Ja Featured articles 
> Article Layout 


» Links Layout 
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كما نلاحظ الجزء من الاعدادات (Data Source)‏ الحقل الأول (Unique ID)‏ وتعني في حالة كان الموديل لديه (id)‏ له خصائص معينة من حيث 
الشكل الاستايل فإننا نقوم بكتابة اسمه ولأن القالب والموديول من الشركة المصنعة فإن الموديول يأخذ الاستايل الموجود في ال(11) المعين من القالب 
ضمن ملفات CSSA‏ 


من خلال الاعدادات السابقة اخترنا الأقسام التي ستظهر في الموديول أو المقالات الموجودة ضمن هذه الأقسام. 


: Article Layout-! إعدادات‎ 
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E 


HHO BB مع‎ y mod news show. sp2 مدير الموديولات: الموديول‎ S 


حقظ حقظ وإغلاق | حقظوجديد gpi Ushia‏ الساعدة 


i |‏ المردبول ينيج 
IT‏ 
Data Source‏ » 
الاسم * 
إظهار العتوان v Article Layout‏ 
asis) [e š‏ 
Article columns - T Eu‏ 3 
الحالة 
مستوى الوصول Aie rows M | Public]‏ 1 
الترتيب ]1 15px 13px Column padding [Y NewsShowSP2‏ 
بداية Sa | 00:00:00 0000-00-00 Ju‏ 
e. E Show title po | 00:00:00 0000-00-00‏ 
تاريخ انتهاء انکر 2 
Y Title linked S‏ © تعم 
ملاحظة ] 
limi: 5 5 8‏ 1 0 . 
Chas ® Words C Title text limit TR News Show SP2 89 "TP‏ 
وصف الموديول 3.2 JoomShaper News Display/Slider Module for 2.5 and‏ و E ye Show‏ 
Chars Words ® 30 Intotext limit 3‏ 
تعيين القاتمة 
تعيين الموديول Date format [v ENT‏ إخقاء M‏ 
قائمة الاختيار: TIT 3 ub dibus‏ 
9 لے اا geh‏ | | كنيد الكل mc Y © Show Author‏ 
User Menu Top Main Menu Fruit Shop Australian Parks. About Joomla‏ 
E Y © Show category‏ 
تبديل التحديد 0( الغاء التحديد ‏ تحديد الكل 
5 © د 
Y Linked category Home - (vi‏ = 
Site Map -B‏ " 
e Sh iti‏ : 
و- - e 7 9 iow ratings. Articles‏ 
و - - Weblinks‏ 1 
Y © Show image‏ ® نعم 
Contacts - -0‏ 
=e Hu Linked image Login -@‏ 
Sample Sites "B‏ 
v  flatleft v After title Image Position Parks - -(3‏ 
Shop --@‏ 
و - Image Margin Site Administrator‏ 0000 
Example Pages -0‏ 
Thumbnail width‏ 185 
Thumbnail height‏ 170 
Y © Aspect ratio‏ © نعم 
E Y © zad More Show readmore‏ 
ai Y © Show comments‏ 
Y ® Show hits‏ قحم 
Y € Like Button‏ تعم 
Y © Twitter Share‏ انعم 
ami Y © Goolge Plus‏ 
Y Horizontal Animation‏ 
Number of slides‏ 10 
v Custom Controllers Style‏ 
m @ Xy © Show pagination‏ 
Y © Show arrows‏ 18 نعم 
s Y Auto play‏ تعم 
aù Y © Show play button‏ 
Hover © Click ® Activator‏ 
Animation speed‏ 200 
Animation interval‏ 5000 
id linear Animation transition‏ 


> Links Layout 


خيارات متقدمة < 


كما نلاحظ الاعدادات اعلاه لبعض الاجزاء توضع كما هي وبعد الحفظ أعلاه سيتم عرض الموديول في الموقع كما في الصورة: 
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[IJ 


تصميم المواقع الرسمية شيكات وصياتة حاسوب 


كما نلاحظ أعلاه تم عمل الموديول في المكان المناسب إلا انه اخذ مساحة من الجانب الايسر بشكل أتوماتيكي أي أن العرض التابع للموضع (user2)‏ 
يساوي auto‏ هنا نريد إضافة موديول آخر وسيكون جامد بدون أي بيانات فقط نص عادي. 


إضافة موديول من نوع ) HTML‏ مخصص): 


قبل اضافة الموديول من صورة (Module Positions)‏ نختار المكان المناسب للموديول واخترنا المكان (userl)‏ ومن مدير لوحة التحكم نقوم 
باختيار (مدير الموديولات) ثم الزر البرتقالي (جديد) ستظهر نافذة نختار منها (موديول HTML‏ مخصص) كما في الصورة التالية: 


حدد نوع الموديول: 
Slideshow Pro 2 News Show SP2‏ 
WOW Slider Module1‏ آخر الأخبار 


آخر المستخدمين 


بعد الضغط على (موديول HTML‏ مخصص) ستظهر الصفحة التالية وبعد القيام بتعبئة البيانات وتحديد بعض الاعدادات : 


MOBILE: 00967 714490030 M ICE IPSE 
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کک مدير gis gall‏ : الموديول موديول HTML‏ مخصص 


التفاصيل 

الاسم * ماتقوم به رواد التكنولوجيا 

إظهار العنوان © إظهار © s‏ 

nad تحديد‎ M atomic-bottomleft user الموضع‎ 
M NC الحالة‎ 

v Public مستوى الوصول‎ 

الترتيب 1. هالقوم به رواد التكتولوجيا v‏ 

بداية النتتر 0000-00-00 00:00:00 | Za‏ 

تاريخ انتهاء النتر 0000-00-00 00:00:00 | 33" 

اللخة الجميع ¥ 

ملاحظة 

رقم التعريف 90 موديول HTML‏ مقصصس ee‏ 
وصف الموديول هذا الموديول يتيح لك إتشاء موديول HTML‏ حاص يك ياستخدام محرر WYSIWYG‏ 


| Styles + Paragraph ~ 
LEJO 


L1 
TO 
Ic 
- 
Mil 
— qii 
Ai 


ماتقوم به رواد التكتولوحيا 


موقع الكتروني متخصص فى تكتولوجيا المعلومات ويقدم خدمة تصميم واستضافة المواقع الالكترونية والتسويق الالكترونى مواقع : رسمية - إخبارية 
- تجارية - تعليمية -قواعد بيانات إعلانات ممولة : فيس بوك - جوجل - نشرات الكترونية رسمية 


Path: p » strong » span á 


إدراج رابط مقال! þh‏ إدراج صورة كا تبديل المحرر 


تعيين القاتمة 
تعيين الموديول Y sumas nd‏ 
قائمة الاختيار: تبديل التحديد | | العاء التحديد | | تحديد الكل 


User Menu Top Main Menu Fruit Shop Australian Parks About Joomla 


الغاء التحديد | | تحديد الكل 


1 


Home - 

Site Map - 
Articles - - 
Weblinks - - 
Contacts - - 
Login - 

Sample Sites - 
Parks - - 

Shop -- 

Site Administrator - 
Example Pages - 


E & & & & & & 6 6 6 «X 


كما نلاحظ تم تسمية الموديول بالاسم أعلاهء الخيار الثاني إظهار العنوان واخترنا (إخفاء) والخيار الخاص بالموضع كتبنا أو إخترنا اسم الموضع وهو 
1 ثم تركنا بقية الخيارات وانتقلنا للنص وكتبنا العبارات أعلاه. 


في تعيين القائمة تم تحديد (على الصفحات المحددة فقط) ثم حددنا فقط (Home)‏ وسيكون شكل الموقع كما في الصورة: 
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AY 


Example Pages Site Administrator Sample Sites 


Login Site Map Home 


Specira 


cria daa‏ ليأ كبتكم التعيليثة ولإكل الحتراقية lazos‏ جدماب dd alo‏ للجامبيات: وَلِسَنِكات 


iPhone Appliea(Tons 


ماتقوم به 3195 التكنولوحيا 


موقع الكتروتى متخصص فى تكتولوجيا المعلومات ويقدم 
خدمة تصميم واستضافة المواقع الالكترونية والتسويق 
الالكتروتى مواقع : رسمية - إخبارية - تجارية - تعليهية - 
قواعد بيانات إعلانات ممولة : قيس بوك - جوجل - 
تشرات الكتروئية رسمية 


تركيب موديول (mod sp. simple gallery)‏ 
أولا نقوم بعمل مجلد اسمه (simple images)‏ أو أي اسم داخل المجلد (imgs2014)‏ وذلك بالذهاب للوحة التحكم ثم (مدير الوسائط المتعددة) ثم 


نضغط على المجلد (imgs2014)‏ ثم نكتب اسم المجلد الجديد (simple images)‏ كما في الصورة: 


الملقات 


5-2014 


simple images CwampWwwwijcomla2 5/images/imgs2014‏ إنشاء مجلد 
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TAs 


كما نشاهد أعلاه في الحقل ادنى الصورة كتبنا اسم المجلد الجديد ثم نقوم بعمل كليك على (إنشاء مجلد) وسيتم إنشاء المجلد وظهور رسالة نجاح 
الانشاء > بعد ذلك نقوم بفتح المجلد الذي أنشأناه ثم نقوم بالرفع للصور ال“ كما في الصورة: 


O 


Cowasmpwwwjoomla2.5/imsges'imgs2014/simple imsges‏ إتشاء مجلد 
رقع الملقات (الحجم الأقصى: 10 (MB‏ 


files 6 | Choose Files | 


بدء الرقع 


من خلال (اختيار ملفات) أو (Choose Files)‏ نذهب للمجلد الذي فيه 5 صور ونضلل عليها كاملة ثم نضغط على (بدء الرفع) وستظهر الصور في 
المجلد الذي أنشأناه كما في الصورة: 


الملقات 
9e ] © aeo 59 o o‏ 
web.png slide3.png slide2.png slidet.png net.png grs.png‏ 

C:wamg'www'joomla2.5/imagesí/imgs2014/simple images‏ إنشاء مجلد 


نقوم الان بالعودة إلى لوحة التحكم ثم (مدير الاضافات) نقوم بتنصيب الموديول ثم من لوحة التحكم مرة أخرى ثم (مدير الموديولات) وسيظهر الموديول 
كما في الصورة (اشارة حمراء أمامه) : 
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الاسم الحالة EA‏ الترتيب التوع التستحات مستوى الوصول 


Simple Image G: 


Simple Image Gallery Module 


Archived Articles 


> ضرت ت و : 


vw‏ الخيارات الأساسية 

لاسم * صور مختارة 

M images/imgs2014/simple images Image directory 
إظهار العنوان © إظهار ود‎ 

60 (Thumbnail Width (in px 
30 (Thumbnail Height (in px gen ana M atomicbottomleft bottom1 الموضع‎ 
yes ® No Keep Aspect Ratio Y د منثور‎ 
M Public مستوى الوصول‎ 

border:ipx solid 2220: margin:0 Spx 10px Custom CSS 
;5px; padding:5px; background:#fff Y الترتيب 1. صور مختارة‎ 
"243 | 00:00:00 0000-00-00 بداية التتر‎ 
"23 | 00:00:00 0000-00-00 تاريخ انتهاء التتر‎ 
v puc ian 
ملاحظة‎ 
الموقع‎ Simple Image Gallery Module 91 رقم التعريف‎ 

jQuery mootools ® JS Framework 
JoomShaper Simple Image Gallery Module - This module will show image صف الموديوأ‎ 

gallery using SLIMBOX 
خيارات متقدمة‎ 4 

تعيين الموديول على كافة الصفحات v‏ 


قائمة الاختيار 


User Menu Top Main Menu Fruit Shop Australian Parks About Joomla 


Home - 

Site Map - 
Articles - - 
Weblinks - - 
Contacts - - 
Login - 

Sample Sites - 
Parks - - 

Shop -- 

Site Administrator - 
Example Pages - 


الإعدادات في الجزء الأيمن معروفة الزيادة هنا اختيار الموضع (bottom)‏ ثم حددنا (على كافة الصفحات) في الجزء الأيسر وهو الأهم في ) image‏ 
(directory‏ هنا سيتم عرض جميع المجلدات الموجدة لدينا ومن خلالها نختار المجلد الخاص بنا (simple images)‏ والموجود في (imgs2014)‏ 
كما في الصورة يظهر المسار الخاص به. الحقلين الذي يلي المجلد هما للطول والعرض للصور. بقية الاعدادات نتركها كما هي وسيظهر الموديول في 
اسفل الموقع كما في الصورة: 
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YA 


(mod. sp. simple youtube j25) إضافة موديول فيديو‎ 


عبارة عن موديول خاص بعرض مقطع فيديو مستورد من موقع اليوتيوب. بعد رفع وتنصيب الموديول ومن لوحة التحكم (مدير الموديولات) وسيكون 
الموديول بعد تنصيبه كما في الصورة: 


الاسم الحالة EA‏ الترتيب التوع L——À‏ مستوى الوصول "P‏ رقم التعريف 
o SP Simple Youtube  (‏ لاشيء SP Simple Youtube 0 (gas dei)‏ لاشيء (تفعيل فورى) m Public‏ 92 
Archived Articles‏ © لاشيء dai)‏ فوري) 1 أرشيف المقالات المحدد فقط Public‏ الجميع 27 


وقبل فتح الموديول نختار مقطع من اليوتيوب حسب متطلبات الموقع وكمثال لدينا المقطع كما في الصورة: 


[3 www.youtube.com/watch?v - [MIR 6 9109 wd*-x-2 


J E صالح اليامي‎ | ٩ l 


وداعة الله | صائح اليامي - Mix‏ 


Saleh Alyami كليب قطر السحايه || صائج اثيامي‎ 
by Saleh Alyami 


اتساه ساعه || صائح اليامي 2012 
by Saleh Alyami‏ 


يامرحيا | اداء صالح اليامي و خائد المري | اويريت 
جائزة eA‏ الي 2014 

by Saleh Alyami 

7,813 views 


-— Saleh اليامي‎ cius | HD كليب درس الليائي‎ 
7" "a 

y Saleh Alyami 
كما في الصورة أعلاه لاحظ الرابط الخاص بالمقطع سنقوم بنسخ ما بعد علامة — فقط‎ 


(http://www.youtube.com/watch?v- NJFÜüuXAQnpw)‏ بعد نسخ الموضح باللون الأصفر ننتقل للموديول وكما نلاحظ في مدير 


المديولات اسم الموديول (SP Simple Youtube)‏ نقوم بفتح الموديول وسيكون شكل الموديول مع اعداداته كما في الصورة: 
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** Q 2 6 B v mod sp simple youtube مدير الموديولات: الموديول‎ S 
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> الخيارات الأساسية 
الاسم * فيديو 
Module Class Suffix‏ 

NJFOUXAQnpw Youtube video id 0 
250 Width تعديد اموضع‎ M atomiobottomleft bottom2 الموضع‎ 
170 Height Y P الحالة‎ 
Disable Enable ® Responsive 75 Public مستوى الوصول‎ 
Y à الترتيب‎ 
"à3 | 00:00:00 0000-00-00 بداية النتر‎ 

4 خيارات متقدمة 
تاريخ انتهاء التتر 0000-00-00 00:00:00 | 23 
اللغة الجميع M‏ 
ice‏ 
رقم التعريف 92 SP Simple Youtube‏ الموقع 
وصف الموديول Youtube module for Joomla by JoomShaper.com‏ 
تعيين القاتمة 
تعيين الموديول على كافة الصفحات 0 
اثمة الاختيا تيديل ai‏ تحديد الک 
User Menu Top Main Menu Fruit Shop Australian Parks About Joomla‏ 

Home - 

Site Map - 

Articles - - 

Weblinks - - 

Contacts - - 

Login - 

Sample Sites - 

Parks - - 

Shop - - 


Site Administrator - 
Example Pages - 


كما نلاحظ الصورة أعلاه أضفنا بعض الاعدادات (الاسم) تم تعديله كما في الصورة واسميناه فيديو ثم (إظهار العنوان) كما هو عليه ثم حددنا 
(Position)-!‏ واخترنا (bottom2)‏ ثم انتقلنا إلى (تعيين القائمة) وحددنا (على كافة الصفحات) . في الجزء الثاني على الجهة اليسرى حددنا 
(Youtube videos id)‏ ووضعنا الكود الذي نسخناه من رابط المقطع ثم الذي يليه حددنا الطول والعرض قمنا بالحفظ. وسيكون شكل الموديول كما 
في الصورة: 


تم تعيين الموديول في المكان الذي حددناه وهو (bottom2)‏ . 
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«uS‏ موديول من نوع HTML‏ مخصص 
سنقوم الان بعمل موديول جديد ونضع فيه بعض التفاصيل حول مالكي الموقع وسيكون من نوع HTML‏ مخصص بنفس طريقة عمل الموديول 
السابقة الذي بعنوان (ما تقوم به رواد التكنولوجيا). 


سنقوم بعمل الموديول في المكان (bottom3)‏ وسيحوي بعض البيانات والأيقونات الخاصة بالموقع وسيكون كما في الصورة: 


a 
E] 
M 
ااا‎ 
Ail 


Styles «| Paragraph ~ 


qos y Om 


RB on o^ 
ii 
x 
x 
Ee] 


رواد التكتولوجيا شارع حدة 


0096 


تلفوت : 7714490030 
تلفاكس : 00967714490030 

البريد الالكتروتي : en yusuf&yahoo.com‏ 
جوال : 714490030 


أو عبرصفحاتنا الاجتماعية 


ew 


Path: p 


الصورة على الموقع: 


عمل روابط أيقونات الصفحات الاجتماعية: 
تظهر أعلاه وكما في الصورة أيقونات خاصة بالمواقع الاجتماعية (فيس بوك - تويتر - يوتيوب) ولكي نقوم بعمل رابط للصورة ومن خلال الرجوع 
للموديول نقوم بعمل كليك على الصورة ولتكن الفيس بوك ثم الضغط على ايقونة الحلقة كما في الصورة: 
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B J U #|5 5 3 5| Styles > Paragraph ~ 
E | 


رواد التكنولوجيا شارع da>‏ 

تلفوت : 00967714490030 

تلقاكس : 00967714490030 

البريد الالكتروتى : en  yusuf&yahoo.com‏ 
جوال : 714490030 


أو عبرصفحاتنا الاجتماعية 


Path: p » img A 


رواد التكتولوجيا شارع da>‏ 


07202207 6016 Link | 00967714490030 : تلفون‎ 
Link URL ل‎ a 
* -- Not Set -- Target en yusuf&yahoo.com : البريد الإلكتروني‎ 
Title 714490030 : جوال‎ 
-- Not Set -- Class اتنا الاجتماعية‎ T€ s 
Path: p » img E 


كما في الصورة أعلاه بعد ظهور النافذة التي في الصورة نضع رابط صفحة الفيس بوك في الحقل (Link URL)‏ وكذلك بقية الأيقونات بنفس الطريقة. 
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نشاء القائمة وربطها بالأقسام 


£ 
تعتبر القائمة الخاصة بموقع جوملا من أهم الاجزاء فعن طريقها يتم ربط الأقسام الموجودة ضمن الموقع الالكتروني. عناصر القائمة أنواع حسب 
الصورة: 


اختيار نوع عنصر القائمة: 


التغذيات الإخبارية 


جميع مجموعات التغذيات الإخبارية 


دليل المواقع 
جميع مجموعات دليل المواقع 
مجموعة دليل مواقع واحدة 


إرسال رابط موقع 


الأكثر استخداما هي أنواع العناصر للقائمة في (المقالات) وكما موضح أعلاه بالاسم : 

أرشيف المقالات : تعني أرشيف للأخبار والمقالات لأشهر وسنوات. 

مقال مفرد: وتعني مقال واحد مثلا عنصر القائمة المسمى (اتصل بنا) عن الضغط عليه تظهر صفحة واحدة هنا نسميها مقال مفرد. 

جميع المجموعات: وهنا يظهر جميع أقسا الموقع. 

مجموعة كمدونة: وتظهر فيها أقسام المدونة في جوملا ولا تستخدم بكثرة. 

مجموعة كلائحة: هنا يظهر قسم واحد فقط فمثلا (قسم التصميم) عن الضغط على عنصر في القائمة من هذا النوع تظهر مقالات هذا القسم فقط, 


المقالات المميزة: وتستخدم في القوالب القديمة ونادرا في الجديدة بحيث اذا تم تعيين عنصر في القائمة بمميز فإننا نختار القسم الذي نريد عرض 
مقالاته أو أخباره المميزة. 


إنشاء مقالة: هنا لو أردنا عمل عنصر في القائمة للمستخدم المخول له بكتابة مقالة. 


في مثالنا أو الموقع الذي قمنا بإنشائه لدينا قائمة جاهزة وسنقوم بتعديل وإضافة عناصر جديد للقائمة وسيكون ذلك عن طريق لوحة التحكم ثم ( القوائم 
) ثم نختار (Main menu)‏ كما في الصورة: 


MOBILE: 00967 714490030 M COPS OPE 
MOBILE 2: 00967 772755202 Email: infoetechpio.net i pe 


4 مدير القوائم‎ CE 


User Menu BM,‏ 4 5 مسب 

& E e B. - 
4 
4 


About Joomla BM, 


ula‏ المجموعات مدير الوسائط المتعددة مدير القوائم مدير الستخدمين 
Australian Parks M,‏ 


e‏ ر 


s 4 Fruit Shop Bi, ~ 
vm — 
 ——Á 


هدير الموديولات مدير الإضافات هدير اللقات الإعدادات العامة هدير القوالب تعديل العلف الشخصي 
4 
لديك آخر تسخة هن Dup‏ لديك آخر اصدار من كل 
الإضافات 


وسيتم فتح عناصر القائمة (Main menu)‏ والتي هي القائمة الرئيسية وستظهر عناصرها كما في الصورة: 


الفلترة: E‏ البحت إعادة Main Menu 3 páll‏ * - تحديد الحد الأقصى 1 للستويات EE‏ - اختيار الحالة - Y‏ - اختيار هستوی الوصول - 


D‏ الاسم الحالة RS a‏ مستوى الوصول نوع am‏ القائمة 

Public o 1 © — rud ®‏ المقالات » المقالات المميزة 

Public oo 2 © 0 f ues B‏ المقالات » مقال مقرد 

Public o 1 © (articles ME ®‏ المقالات » جميع المجموعات 

Public oo [ 2 © UE fria 6‏ دليل المواقع » جميع مجموعات دليل المواقع 
L‏ ا E às 9 L3 e (contacts‏ سي عبر وده 
Public oo [ 3 © (oon bos Û‏ مدير الستخدمين » نموذج تسجيل الدخول 
o‏ حي سر Public oo 4 © VER‏ المقالات » مقال مقرد 

Public o 1 [^] € E C)‏ اسم ستعار لعنصر قائمة 

Public o 2 © imp Pai =‏ اسم مستعار لعنصر قائمة 

Public oo 5 eo Site Administrator |j‏ عتوان إتترتت خارجي 

pad naga SPER o e © Example Pages ®‏ قضة 


(الاسم الستعار: (example-pages‏ 


بعد ظهور العناصر كما في الصورة اعلاه نقوم بالضغط على العنصر Home‏ وستظهر الاعدادات الخاصة به كما في الصورة : 


MOBILE: 00967 714490030 : 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


NENN 


الموتع المستخدمين ١‏ القوائم ١‏ المحتويات ١‏ التطبيقات ١‏ الإضاتات ١‏ المساعدة 6ه لايوجد أعضاء داخل الموقع .كه 1 عضو داخل الإدارة € لاتوجد رسائل Ọ dauu gm‏ تسجيل خروج 


s © 6 : T 
C 8 EO > 
9 - ın] (m| مدير القوائم: تعديل عنصر القانمة ي‎ B, 
إغلاق الساعدة‎ Usia ا حقظ حقظوإغلاق حفظ وجديد‎ 
A 7 التقاصيز‎ 
خيارات تموذج العرض‎ v 0 
نوع عنصر القائمة * المقالات المميزة تحديد‎ 
^ - اختيار المجموعات - كل المجموعات‎ 
Uncategorised اسم القائمة الرئيسية‎ 
المواقع الإلكترونية‎ ues 
wm homepage) الاسم المستعار‎ 
Die صيلة حدوب‎ 
ملاحظات عم‎ 
[m 
index. php?option-com content&view-festured الرابط‎ 
Y asta الحالة‎ 
إذا تركت الحقل قارحا » سيتم استخدام الإعدادات العمومية.‎ M Public مستوى الوصول‎ 


كما نلاحظ أعلاه قمنا بالتعديل فقط في اسم القائمة وغيرناها من Home‏ إلى ( الرئيسية ) فقط ثم (حفظ وإغلاق). نقوم بمعاينة الموقع وسنرى التغيير 
في عنصر القائمة (الرئيسية) كما في الصورة: 


Example Pages Site Administrator Sample Sites Login Site Map الرئيسية‎ 


Specira 


سنقوم الان بالعودة للعناصر في القائمة وسنقوم بفتح العنصر (Site map)‏ وستكون اعدادات العنصر كما في الصورة: 


الموقع المستخدمين ١‏ القوائم | المحتويات التطبيقات الإضاقات | المساعدة لايوجد أعضاء داخل الموقع A‏ عضو داخل الإدارة e‏ لاتوجد رسائل Ọ dauu m‏ تسجيل خروج 


45 eo ات‎ 5 E zn 
** 2 a (m) مدير القوائم: تعديل عنصر القائمة يو‎ E, 
حقظ حقظوإغلاق حفظوجديد حفظكتخة إغلاق الساعدة‎ —» 
التفاصيل‎ 
الإعدادات المطلوية‎ v 3 
E توع عنصر القائمة * مقال مقرد‎ 
اختيار/تغيير‎ Site Map| * اختيار مقال‎ 
Site Map * اسم القائمة‎ 
site-map. الاسم المستعار‎ 
إعدادات المقالات‎ 4 
EUR 


كما نلاحظ أعلاه نوع العنصر للقائمة عبارة عن مقال مفرد وسنقوم بتغيير النوع إلى مجموعة كلائحة كي تعرض لنا مقالات في قسم معين وهو قسم 
خدماتنا. لذلك لدينا اربع خطوات هي تغيير النوع ثم تغيير الاسم ثم تغيير الاسم المستعار لاسم آخر (اي اسم مناسب للرابط) ثم اختيار القسم 


تغيير النوع وذلك بالضغط على زر (تحديد) من أمام (نوع عنصر القائمة) وستظهر النافذة التالية: 


MOBILE: 00967 714490030 TO E 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


اختيار نوع عنصر القائمة: 


جهات الاتصال 


إظهار لاتحة من المقالات في مجموعة. | 


كما في الصورة أعلاه بعد ظهور النافذة أعلاه نقوم باختيار (مجموعة كلائحة) وسيتم ارجاعنا على العنصر الذي نريد تعديله كما في الصورة: 


yd‏ المستخدمين القوانم المحتويات التطبيقات الإضاقات المساعدة ا لايوجد أعضاء داخل الموقع d‏ 1 عضو داخل الإدارة e‏ لاتوجد رسائل dauu gg‏ © تسجيل خروج 


4 
+ 
e 
a 
CE 
E 
« 
E 
$, 
t 
E 
Y. 
E 
& 
z 
1 ] 


التفاصيل 5 
v‏ الإعدادات المطلوية 
نوع عنصر القائمة * Ac gana‏ كلائحة P‏ 
اختيار المجموعة * 
اسم القائمة * إخدماتنا 
الاسم المستعار cur sen‏ 
4 خيارات المجموعة 
ملاحظات 
4 لاتحة التصميمات 
الرابط index.php ?option=com_content&view=category)‏ 
4 إعدادات المقال 
الحالة Y "P‏ 
ï‏ 4 خيارات الدمج 
مستوى الوصول r Public‏ 
4 خيارات نوع الرايط 
مكان القائمة * M Main Menu‏ 
i‏ 4 خيارات عرض الصفحة 
العنصر الام جنر عنصر القالمة v.‏ 
4 خيارات الكلمات المقتاحية 


نلاحظ أعلاه قمنا بالتالي : -١‏ تغيير نوع العنصر إلى (مجموعة كلائحة). LY‏ اسم القائمة غيرناه إلى (خدماتنا) ۳- الاسم المستعار وضعنا اسم مختصر 
بالإنجليزية وهي اختياري ويمكن تركه فارغا. 4- على اليسار اختيار المجموعة واخترنا (خدماتنا). 


بعد الحفظ والإغلاق نقوم بمعاينة الموقع وسيكون شكل القائمة كما في الصورة: 


Example Pages Site Administrator Sample Sites Login خدماتنا‎ 


Articles 
Weblinks 


Contacts 


وبعد الضغط على خدماتنا ستظهر الصفحة كما في الصورة: 


MOBILE: 00967 714490030 M CREE 
MOBILE 2: 00967 772755202 Email: infoetechpio.net j puo 


Example Pages Site Administrator Sample Sites Login d الرئيسية‎ 


Specira 


شيكات وصيانة حاسوب كتب بواسطة: Super User‏ 0 
تصميم جراقكس كتب بواسطة: Super User‏ 0 
تصميم المواقع الإلكتروتية كتب بواسطة: Super User‏ 1 


نلاحظ كيف ظهرت عناصر أو مقالات القسم (خدماتنا) كما في الصورة أعلاه. نقوم الأن بالعودة الى عناصر القائمة وكما في الصورة التالية سنقوم 
بحذف العناصر الزائدة تحت عنصر القائمة (خدماتنا) : 


v - اختيار اللغة‎ - | jv - اختيار مستوى الوصول‎ - | | Y - اختيار الحالة‎ - | | Y _- تحديد الحد الأقصى للستويات‎ - | | ۳ Main Menu البحت إعادة التعيين‎ Ju 

| 

RS [s] as pi‏ مستوى الوصول نوع عتصر القائمة m m‏ قم التعريت 
Public o 1 eo — Na‏ المقالات » المقالات المميزة x‏ الجميع 

294 المقالات » مجموعة كلائحة الجميع‎ Public oo 2 e ven ce 5 | 
290 جميع المجموعات الجميع‎ » ON Public o 1 e ia ges ي‎ 
438 المواقع » جميع مجموعات دليل المواقع الجميع‎ do Public oo 2 e mA pipes z 
439 m جهات الاتصال » جميع مجموعات الاتصال‎ Public o 3 e n يوسي‎ 3 


كما نلاحظ أعلاه تم التأشير على العناصر المندرجة تحت العنصر (خدماتنا) ثم الاتجاه الى اعلا لوحة التحكم واختيار (حذف) وسيتم حذف العناصر 
ويمكن معاينة الموقع ولن نجدها تحت العنصر(خدماتنا) 


نعود الآن الى عناصر القائمة مرة أخرى وكما في الصورة: 


v اختيار اللغة-‎ | |v - اختيار مستوى الوصول‎ - | | v - تحديد الحد الأقصى للستويات - ” | | - اختيار الحالة‎ - | | Y Main Menu إعادة التعيير‎ E oM 
رقم التعريف‎ E ERU القائمة‎ pads مستوى الوصول توع‎ RS الاسم الحالة م‎ 
ini 
المقالات » المقالات المميزة الجميع‎ Public o 1 
5 * المميز:‎ g o (homepage : js: (الاسم‎ 
294 المقالات » مجموعة كلائحة الجميع‎ Public oo 2 د‎ 
5 x 5 o (our-serv (الاسم المستعار:‎ 
233 558 gil ودع جل‎ a الفستهدمين‎ ja Public 6 © 3 o Fea 
A 5 ا‎ LANE عاو‎ D ١ (login ) 
238 المقالات » مقال مفرد الجميع‎ Public oo 4 e Sample Sites 5 
(sample-sites ) 
445 فم مستعار لعتصر قائمة ل‎ Public 9 1 e e 
(parks (الاسم الستعار:‎ = 
2 Shop 
446 قائمة الجميع‎ paal اسم ستعار‎ Public o 2 
> eo (shop (الاسم الستعار:‎ 
448 عنوان إتترنت خارجي الجميع‎ Public oo 5 eo Site Administrator 
LA X: P; 
اسم ستعار لعتصر قائمة الجميع‎ Public o e eo Example Pages 


(example-pages استعار:‎ &1) 


من الصورة أعلاه العنصر (Login)‏ سنقوم بتغييرها على (حول رواد التكنولوجيا) والتي هي عبارة عن معلومات حول رواد التكنولوجيا وقمنا سابقا 
بعمل مقال اسمه (من نحن) سنربط هذه العنصر بهذه المقالة وبهذا يكون نوع العنصر في القائمة هنا (مقال مفرد). وسنقوم بالخطوات التالية: 


MOBILE: 00967 714490030 NORTE 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


فتح العنصر (Login)‏ 

تغيير نوع القائمة إلى (مقال مفرد). 

تغيير الاسم الى (حول رواد التكنولوجيا). 

تغيير الاسم المستعار الى اي اسم او تركه فارغا. 
اختيار المقالة من الجهة اليسرى من الاعدادات. 


وسيكون التطبيق كما في الصورة: 


التقاصيل 

نوع عنصر القائمة * Jis‏ مقرد == 
اسم القائمة * حول رواد التكنولوجيا 

about tech pio الاسم المستعار‎ 

index.php?optionzcom content&viewzarticle. PIE 
Y الحالة هنشور‎ 

M Public مستوى الوصول‎ 

v Main Menu * مكان القائمة‎ 

v idm jm العنصر الأم‎ 

v Login الترتيب‎ 

طريقة فتح النافذة Y FERT]‏ 

الصفحة الافتراضية © y‏ تعم 

اللخة الجميع Y‏ 

نمط القالب - استخدم الاقتراضى Y‏ 

رقم التعريف 233 


كما في الصورة أعلاه من الجزء الأول من الاعدادات قمنا بتغيير النوع للقائمة وبنفس الطريقة السابقة بعد الضغط على (تحديد) ستظهر نافذة نختار 
منها (مقال مفرد). نقوم بتغيير الاسم الى (حول رواد التكنولوجيا). نقوم ايضا بتغيير الاسم المستعار لأي اختصار او اي اسم. 


MOBILE: 00967 714490030 


MOBILE 2: 00967 772755202 


في الخطوة التالية من الاعدادات على اليسار وكما في الصورة : 


v‏ الإعدادات المطلوية 


اختيار ji * dia‏ مقال اختيار/تخيير 


كما في الصورة أعلاه نقوم بالضغط على زر(اختيار/تغيير) وستظهر نافذة كما في الصورة: 


"a : .te io.net 


- اختيار المجموعة - 
Uncategorised‏ 1 المجموحة P‏ تاريخ الإتشاء رتم التعريتف 


2011-01-01 — Components 3, 2 j Administrator Components 
2011-01-01 الجمي‎ Content Modules Archive Module 
2011-01-01 الحم‎ Content Modules Public Article Categories Module 
2011-01-01 -— Content Modules Public Articles Category Module 


2011-01-01 -= Park Site Public Australian Parks 


2044 n1 N1 mand Dııhlir Aııthantiratinn 


كما في الصورة أعلاه نختار القسم أو المجموعة التي تتضمن المقالة التي كتبناها مسبقا (من نحن) وقد وضعناها في قسم (عام) وبعد اختيار قسم عام 
ستظهر المقالات التي فيه كما في الصورة: 


البحت إعادة التعيين 


مستوى الوصول المجموعة ia‏ تاريخ الإنشاء رقم التعريف 
Public‏ عام الحم 2014-05-12 78 


7T 2014-05-12 عام الجميح‎ Public 


عدد أمطر اللائحة: |20 v‏ 


من المقالات التي ظهرت نختار من نحن وسنعود للصفحة الخاصة بالقائمة ونقوم بعملية (حفظ وإغلاق) وستظهر الصفحة كما في الصورة: 


Example Pages Site Administrator Sample Sites حول رواد التكتولوجيا‎ 


Specira 


وعند الضغط على زر القائمة (حول رواد التكنولوجيا) ستظهر الصفحة التالية: 


Example Pages Site Administrator Sample Sites الرئيسية خدماتنا حول رواد التكتولوجيا‎ 


MOBILE: 00967 714490030 
MOBILE 2: 00967 772755202 Email: infoetechpio.net 


www.techpio.net 


نعود الان للقائمة الرئيسية وكما في الصورة: 


القلترة: البحت !$3 التعييت v Main Menu‏ - تحديد الحد الأقصى للستويات Y  -‏ - اختيار الحالة v  -‏ - اختيار هستوى الوصول - * - اختيار اللغة - v‏ 
الاسم الحالة a‏ الترتيب غ مستوى الوصول py‏ عتصر القائمة R‏ اللغة قم التعريت 
الرئيسية 
Public o 1 SET‏ المقالات » المقالات المميزة الجميع 
o (homepage‏ * 
خدماتتا 
Public oo 2 eo‏ المقالات » مجموعة كلائحة الجميع 294 
(our-serv n)‏ 
ل رواد التكنولوجيا 
حول رواد Public oo 3 © RISE‏ المقالات » مقال مقرد الجميع 
(about-tech-pio‏ 
mple Si‏ 
Public oo 4 © Sample Sites T‏ المقالات » مقال مقرد الجميع 238 
(sample-sites )‏ 
Parks‏ —- 
Public o 1‏ اسم مستعار لعتصر قائمة —- 
c e -— )‏ 1 
JA Shop‏ 
Public o 2‏ اسم ستعار لعنصر قائة الجميع 446 
e (shop )‏ ج 
Public 6 © © Site Administrator‏ عتوان إنترتت خارجي الجميع 
m Example Pages‏ 
Public o e eo p 9‏ اسم ستعار لعتصر قاثمة الجميع 455 


(example-pages الستعار:‎ i) 


كما في الصورة أعلاه سنقوم الان بعمل عنصر في القائمة باسم (الأقسام) وسنضع عناصر فرعية لها وهي (قسم تصميم المواقع - قسم الجرافكس - 
قسم الشبكات والصيانة ). كل قسم في القائمة هنا سيكون مرتبط بالقسم أو المجموعة الذي أنشأناها من أجله والتي تشابهه بالاسم. والخطوات الاولى 
كالتالي: 


نقوم بفتح العنصر Sample sites)‏ 


تغيير نوع القائمة إلى (عنوان إنترنت خارجي) وهذا النوع يتيح لنا وضع رابط معين ولكن الغرض لدينا هنا تركه فارغا بدون رابط لأننا نريد أن يكون 
المحتوى ضمن العناصر المندرجة ضمن العنصر(اقسام). 


سنقوم بفتح العنصر (Sample sites)‏ وسيكون الشكل بعد التعديل كما في الصورة: 


التفصيل 

نوع عنصر القائمة * إعنوان إنترنت خارجي تحديد 
اسم القائمة * الأقسام 

الرابط 

ملاحظات 


نقوم بعمل (حفظ واغلاق). ننتقل للعنصر (Parks)‏ كما في الصورة. 


] 1 تم حتت صر الادمة يتح 
a‏ البحت | | إعادة التعيير [v Main Menu‏ | - تعديد الحد الأقصى للستويات - _ [vw‏ | - اختيار الحالة - _ v‏ اختيار مستوى الوصول - اختيار اللغة v  -‏ 
p‏ 
الاسم الحالة RS "n‏ مستوى الوصول توع عتصر القائمة EI ian‏ قم التعريت 
الرئيسية 
Publ o 1‏ المقالات » المقالات المميز mM‏ 
o (homepage‏ * 
Publi oo 20‏ المقالات » مجموعة كلائحة الجميع 94 
o (our-serv Suai pe)‏ 
حول رواد التكنولوجيا 
Public 6 ©‏ قالات « مقال TA ja‏ 2 
o (about-tech-pio )‏ 
الأقسام Public oo 4 eo‏ عنوان إتترنت خارجو الجميع 
لعف aiaa‏ 
bii o 1 ©‏ اسم مستعار لعتصر قائمة الجميع 4 
(parks‏ 
Shop‏ 
Publ o 2‏ اسم ستعار لعتصر قائىة == 44 
سم e (shop à‏ 
b oo [^] Site Administrator‏ عنوان إتترنت خارجي الجميع 4 
imple P.‏ 
Pubi o e e EEO‏ اسم ستعار لعنصر قشة الجميع 4 


(example-pages 


MOBILE: 00967 714490030 RERUM 
MOBILE 2: 00967 772755202 Email: info@techpio.net Aid nes 


YAA 
نقوم بالتالي:‎ (Parks) بعد فتح العنصر‎ 
تغيير النوع إلى (مجموعة كلائحة).‎ 
تغيير الاسم الى (قسم تصاميم المواقع).‎ 
تغيير الاسم المستعار.‎ 
اختيار المجموعة أو القسم (تصميم المواقع الالكترونية).‎ 


بعد تنفيذ الخطوات السابقة ستكون كما في الصورة: 


التقاصيل - 
v‏ الإحدادات المطلوية 
نوع عنصر القائمة * |مجموعة كلالحة تحديد 
اختيار المجموعة * تصميم المواقع الإلكترونية [Y‏ 
اسم القائمة * سم تصميم الموا اقح 
الاسم المستعار webdesign‏ 


وسيكون شكل العنصر في الموقع بعد (حفظ وإغلاق) كما في الصورة: 


Example Pages Site Administrator PEU الرئيسية خدماتنا حول رواد التكتولوجيا‎ 


قم تصميم المواقع 


Shop 


Specira 


وبعد الضغط على الزر سيكون شكلها كما في الصورة: 


Example Pages Site Administrator 


Specira 


تصميم مواقع رسمية كتب بواسطة: Super User‏ 0 


ننتقل للعنصر (Shop)‏ وبنفس الخطوات السابقة نقوم بتغيير اسمه إلى (قسم الجرافكس) وربطه بالمجموعة أو القسم (تصميم جرافكس) وستكون 
لاعدادات كما في الصورة: 


التقاصيل ¬ 

v‏ الإعدادات المطلوية 
نوع عنصر القائمة * مجموعة كلالحة anal‏ 

اختيار المجموعة * تصميم جرافكس M‏ 

اسم القائمة * هسم الجراقكر 
الاسم المستعار graphics‏ 

4 خيارات المجموعة 
c‏ ارا 


بعد (الحفظ والإغلاق) سيكون شكل العنصر في القائمة كما في الصورة: 


MOBILE: 00967 714490030 SUME n 
MOBILE 2:00967 772755202 Email: info@techpio.net Aic nies 


۹ 


Example Pages Site Administrator حول رواد التكتولوجيا الأضام‎ X الرئيسية‎ 


Specira 


وبعد الضغط عليه سيكون كما في الصورة: 


Example Pages Site Administrator on 


تصاميم ومطيوعات كتب بواسطة: Super User‏ 0 


نأتي لإضافة قسم جديد وهو (قسم الشبكات والصيانة) ويكون مندرجة تحت عنصر الأقسام ايضا ولكي نقوم بعمل هذا القيم نقوم بالتالي: 
من لوحة التحكم (القائمة — Main menu‏ - إضافة عنصر قائمة جديد). 

اختيار النوع للقائمة (مجموعة كلائحة). 

وضع اسم القسم (قسم الشبكات والصيانة). 

وضع اسم مستعار. 

من الاعدادات نحدد العنصر كفرع من الاقسام عن طريق خيار (العنصر الام) نختار (الأقسام). 


وسيكون شكل الاعدادات كما في الصورة: 


MOBILE: 00967 714490030 EAE T S 
MOBILE 2: 00967 772755202 Email: info@techpio.net ah nies 


— 
د‎ 
D 


مدير zail gäl)‏ عنصر A ais‏ جديد 


التفاصيل 

| د‎ | 7 CABE o sad * توع عنصر القائمة‎ 
NR sain 

8 net mant الاسم المستعار‎ 

ملاحظات | 

الرابط ?option=com_content&view=categ ory‏ ا 
الحالة [v "HW‏ 

E Public | مستوى الوصول‎ 

[Y misin menu] ^id» مكان‎ 

العنصر الأم جنر عنصر القالمة v‏ 

áo‏ سيتاح الترتيب يعد حقظ حتصر القائمة 
طريقة فتح النافذة Ti‏ 

الصقحة الاقتراضية تعم 

"m 

E Bampi pages] تمط القالب‎ 

رقم التعريف 0 


v‏ الإعدادات المطلوية 


اختيار المجموعة * صيلة حالوب ونكت v‏ 


4 خيارات المجموحة 

Aa] 4‏ التصميمات 

Qual! إعدادات‎ 4 

4 خيارات الدمج 

4 خيارات توع الرايط 

4 خيارات عرض الصقحة 
4 خيارات الكلمات المقتاحية 


4 تخصيص موديول لعتصر القاتمة هذا 


وبعد (الحفظ والإغلاق) سيكون شكل الموقع كما في الصورة : 


Example Pages Site Administrator 


سنقوم الان بالعودة الى عناصر القائمة الرئيسية وكما في الصورة: 


MOBILE: 00967 714490030 a e e 
MOBILE 2: 00967 772755202 Email: info@techpio.net ; pr 


polis aši äl!‏ القائمة 
القلترة: البحت | | إعادة التعيين Main Menu‏ ۷ | - تحديد الحد الأقصى للمستويات -_ V‏ | .| - اختيار V -Uad‏ | | - اختيار مستوى الوصول - [v‏ | - اختياو اللغة- _ v‏ 
8 الاسم الحالة a‏ الترتيب 2 — pam gyi‏ القائمة "TE RE‏ 
الرئيسية 
Public o 1 mi‏ المقالات » المقالات المميزة الجميع 435 
(الاسم الستعار: iu acd 9 (homepage‏ 
Public oo | 2 © k 8‏ المقالات » مجموعة كلائحة الجميع 294 
(الاسم الستعار: (our-serv‏ 
c‏ حول رواد التكنولوجد : i‏ 
Public oo E E‏ المقالات » مقال مقرد الجميع 233 
B‏ (الامم الستعار: i - ` 0 (about-tech-pio‏ 
Public oo E © s og‏ عنوان إتترتت خارجى الجميع 238 
قم تصميم المواقع قالات ة كلائحة 
Public o 1‏ المقالات عة كلائحة الجميع 445 
a)‏ الستعار: D 9 (webdesign‏ 1 
E‏ قم E P‏ 
a‏ قم الجراقكس © 2 |[ Public oo‏ المقالات » مجموعة كلائحة الجميع 446 
(الاسم الستعار: (graphics‏ 
قم التبكات والصياتة 
8 بكات Public o 3 © ay‏ المقالات » مجموعة كلائحة الجميع 469 
a1)‏ المستعار: (net-mant‏ 
Site Administrator @‏ 9 قا o9‏ سد سياه o m‏ دود 
Public o e © Example Pages‏ اسم مستعار لعتصر قائمة c‏ 455 


(الآسم الستعار: (example-pages‏ 


كما نلاحظ في الصورة أعلاه سنقوم الان بعمل عنصر جديد وسيكون (أخبار رواد التكنولوجيا) وقبل البدء بعمل العنصر نقوم بالذهاب لمدير المجموعات 
وعمل مجموعة جديد (قسم) خاص بالأخبار نسميها ونقوم بحفظها ونعود لعناصر القائمة وننشئ العنصر بنفس الالية السابقة وسيكون من النوع 
(مجموعة كلائحة) وستكون الاعدادات كما في الصورة: 


التفاصيل - 
v‏ الإحدادات المطلوية 

نوع عنصر القائمة * |مجموعة كلالحة m‏ 

¥ اختيار المجموعة * أخبار رواد التكنولوجيا‎ — un 
اسم القائمة * أخبار رواد التكنولوجيا‎ 
news الاسم المستعار‎ 
خيارات المجموعة‎ 4 T 
لاحظات‎ 

4 لاتحة التصميمات 

index.php?optionzcom content&viewzcategory الرابط‎ 

الحالة 4 إعدادات المقال 

r NH D 


وسيكون شكل العنصر في الموقع كما في الصورة: 


أخيار رواد التكتولوجيا Example Pages‏ 


Specira 


نعود لعناصر القائمة لإنشاء آخر عنصر وهو Jail‏ بنا بدلا عن (Example Pages)‏ وتغيير النوع إلى (مقال مفرد) ونختار من مجموعة او قسم 
(عام) المقالة التي انشأناها وهي (اتصل بنا). وستكون الاعدادات كما في الصورة: 


التقاصيل = 
v‏ الإعدادات المطلوية 
نوع عنصر القائمة * إمقال مقر: FE‏ 
اختيار مقال * [m‏ اختيا ر/تغيير 
اسم القائمة * اتصل بنا 
الاسم المستعار contact‏ 
4 إعدادات المقالات 
cia‏ 
4 خيارات توع الرايط 
index.php?optionzcom, content&viewcarticle. ET‏ 
— 4 خيارات عرض الصقحة 
الحالة منشور Y‏ خيارات عرض 


MOBILE: 00967 714490030 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: info@techpio.net 


وسيكون شكل القائمة النهائي في الموقع كما في الصورة: 


الرئيسية خدماتتا حول رواد التكتولوجيا ENS‏ أخبار رواد التكتولوجيا اتصل يتا 


Specira 


aie y‏ الضغط على (اتصل بنا) تظهر المقالة التالية: 


Specira 


اتصل بنا 


تاريخ التتر كتب يواسطة: SuperUser‏ © المجموعة: عام كع الزيارات: 0 ق 


رواد التكلولوجيا 
P Lo-vveev y‏ 


رواد التكنولوجيا شارع حده 
st‏ : 00967772755202 
تتقاكس : 00967772755202 
البريد الإلكتروتي : en yusuf(gyahoo.com‏ 
جوال + واتساب : 00967772755202 


أو عبرصتحاتنا الاجتماعية 


MOBILE: 00967 714490030 ROM m 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


يمكننا اضافة وتعديل ما نريد على القالب الخاص بنظامنا الذي يعمل على جوملا وذلك عن طريق إعدادات القالب أو ملفات CSSA‏ ولكي نقوم بعملية 
تغيير الشعار نقوم أولا بإيجاد الشعار والمقاس الذي نريده. 


خطوات تركيب شعار للموقع : 
تصميم شعل بأي مقاس وسيكون المقاس الخاص بموقعنا الطول(4 (Y Y‏ بكسل العرض )* * (f‏ بكسل. وسيكون نوع الصورة (PNG)‏ خلفية شفافة. 


agii‏ بتسمية الصورة إلى (logo.png)‏ ونقوم بنقلها إلى المجلدات الموجودة في المسار التالي: من داخل المجلد الخاص بالموقع نختار 
(templates) 312-4‏ ثم المجلد (shaper spectra)‏ وهو اسم القالب ثم المجلد (images)‏ ثم المجلد (styles)‏ ثم ننسخ الشعار الى داخل المجلدات 
style3 - style2 — stylel)‏ .. إلى ((style8‏ بعد نسخ الصورة (الشعار) نقوم بمعاينة الموقع وتحديثه واذا لم تظهر الصورة نستمر في التحديث أو 
عمل (اعادة تحميل لصفحة الموقع - (reload‏ وسيكون شكل الموقع مع الشعار كما في الصورة: 


MESA‏ الرواد لتكنولوج 


TECHNOLOGY 


GY PIONEERS 


من الخدمات الراقية والجميلة التي تقدمها تصاميم لجميع وسائل الدعلية والإعلان,قريق 


تم تركيب الشعار ويبقى تعديل العرض الخاص به وذلك من (لوحة التحكم) ثم (مدير القوالب) ثم اسم اقالب (shaper. spectra - Default)‏ كما في 


5 
الصورة:‎ 
» 1 E — 
«€ fu E @ * مدير القوالب: الأنماط‎ 
الخيارات الساعدة‎ ʻia تعدیل تسخة طبق الأصل‎ "T mmu 
"E 
MIT LE Y - البحت عادة التعيين اختيار القالب‎ Ju 
الاقتراضي معين رقم التعريف‎ Eu E EE 
3 e Atomic الموقع‎ Atomic- Defaut — (J 
6 e Beez5 الموقع‎ Beez5-Default EÊ © 
114 eo Beez 20 الموقع‎ Beez2-Parks Site EF @ 
4 eo Beez 20 das Beez2 - Defaut © 
2 * Bluestork المدير‎ Bluestork- Defaut @ 
5 Hathor m Hathor - Defaut E © 
115 5 Shaper spectra الموقع‎ m 5 


MOBILE: 00967 714490030 TORE 
MOBILE 2: 00967 772755202 Email: info@techpio.net : 


بعد الضغط على اسم القالب سيتم فتح صفحة الاعدادات الخاصة به كما في الصورة: 


Powered By ^ i 
Ej Menu Fonts {3 Menu Assignment J Advanced f Help & Update ^ Helix 


Text © Image © Logo Type Shaper Spectra 
mde Fege qon Joomla 2.5 Template by ww w.joomshaper.com 
TechFic Logo Slogan 
p JoomShaper 
koo ogo Premium and powerfull Joomla templates and Extensions 
^ 420 Logo Height http://www joomshaper.com 


من الصورة اعلاه ومن اليسار قمنا بتغيير العرض ٠٠(‏ ؛) بكسل فقط. نقوم بمعاينة الموقع وسنرى الشعار في كما في الصورة: 


ألم الرواد لتكنولوجيا المعلومات 


TECHNOLOGY PIONEERS ED 


تصميم المواقع الإلكترونية 


تقوم رواد التكنولوجيا يتصميم المواقع الالكتروتية الرسمية يأنواعها سواء كانت تجارية 


MOBILE: 00967 714490030 INNER 
MOBILE 2:00967 772755202 Email: info@techpio.net Add nies 


التعديل فى ملفات القالب (ملفات (CSS‏ 
يمكننا التعديل على ملفات CSS-‏ الخاصة بالموقع ولأن القوالب الخاصة بجوملا في أغلبنا تكون مليئة بملفات CSSA‏ وايضا لان الأكود تكون بالألاف 
فلابد من وسيلة للوصول للكود الذي نريد القيام بتعديله. 


وإضافة لخبرتنا ومعرفتنا بلغة CSS-‏ سنحتاج بعض الادوات والبرامج التى ستساعدنا فى عملية التعديل وهى كالتالى: 
ع مج في هي 

برنامج الدريم ويفر. 

متصفح موزيلا فايرفوكس أو جوجل كروم. 


أداة (Firebug)‏ ويتم تزيلها من الرابط. 


تعديل حجم عناوين القائمة 


سنقوم هنا بالتعديل على ملفات CSS-‏ الخاصة بالقالب الخاص بالموقع الالكتروني وسنقوم بفتح المتصفح (موزيلا فايرفوكس) والمركب عليه اداة 
(Firebug)-!‏ والموقع الخاص بنا. 


نلاحظ في الصورة التالية أيقونة الأداة على اليمين والتي على صورة (حشرة): 


€ @ localhost/icomla 25/ 7 7 © | | 88 + Google تام‎ ¥ &^*- 80 


وللبدء بالعمل عليها نقوم بالضغط على الاداة في متصفح (فايرفوكس) وستظهر نافذة من أسفل الموقع كما في الصورة: 


É | © localhost/loomla_2.5/ 1 © | E- Google P. هم‎ *- «lu 


MNA‏ الرواد لتكنولوجيا المعلومات 


TECHNOLOGY 


TECHNOLOGY PIONEERS 


شكت ری عسوب 


أحدت X Laid!‏ ة وتقدم خدمات leal!‏ و 
ات ويكل احترافية و أت ة للحاسيات والشيكات 


s | € 2 | = [+| Console | HTML ~ | css. Script DOM Net Cookies [e |800 
23 | Edit | body.bg < html Style + | Computed Layout DOM 


nl PUBLIC "-//W3C//DTD XHIML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmli/DTD/xhtmli-transitional.dtd"» -clearfix:afemplate.css (line 106) ^ 
" xml:lang-"ar-aa" xmins-"http://www.w3.0rg/1999/xhtml" slick-uniqueid-"3"» t 3 


clear: both; 

content: " "; 

display: block; 

font-size: 0 

height: 0; 

line-height: 0; 

visibility: hidden; - 


MOBILE: 00967 714490030 MOREM 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


* نضغط ule‏ ونؤشر على عناوين القائمة كما في 


ومن خلال الزر الموجود على رأس النافذة من اليسار والذي هو على شكل مؤشر فأرة 
الصورة: 


هلل الرواد لتكنولوجيا المعلومات 


TECHNOLOGY 


TECHNOLOGY PIONEERS 2 


localhost/Joomla 2.5/ 


a] 2 |= |+| console | umm - | css Script DOM Net Cookies م‎ ]eex 
E | Edit | a.menu-item > li.menu-item > ul.sp-menu < div.sp-wrap > divshornav.clearfix < body.bg > html » 


Ej <ul class-"sp-menu level-0"» 


£hornav menu.css (line 26) 


<li class-"menu-item active first"»‏ ها 


ul.level-0 
a > 
2 <span class-"menu"» E | 1i.menu-item 
<span class-"menu-title"» اترئيسية‎ </span> od 
a.menu- 
</span> 
ais 5 item:hover, 
id £sublevel 
</li> 


ul.level-1 
Hl «li clasa="menu-item"> x 


من خلا الصورة أعلاه قمنا بالتأشير على عنوان القائمة (الرئيسية) بعد التأشير نقوم بعمل كليك. ومن النافذة الخاصة بالأداة على اليمين يظهر الكلاس 
او ال (id)‏ الخاص بالعناوين للقائمة مع اسم ملف ال99') كما في الصورة. وعند التأشير على (menu.css)‏ الموجود على يمين النافذة يظهر الامتداد 
الخاص بالملف (مكان الملف بالضبط) كما في الصورة: 


© 1 | م 


»rnav.clearfix > body.bg < html 


ul.level-0 


http://localhost/Joomla 2.5/templates/shaper spectra/css/menu.css 
LJ 


> 


$hornav menu.css (line 33) E 


a.menu-item, 
#sublevel 
ul.level-1 

> 


من خلال الصورة أعلاه تعرفنا على المكان الذي بإمكاننا التعديل من خلاله وهو في ملف menu.css‏ الموجود في المسار (مجلد الموقع templates-‏ 
css — shaper. spectra —‏ ( نذهب لمكان الملف حسب المكان المشار له وسنجد الملف كما في الصورة: 


MOBILE: 00967 714490030 "wo d 
MOBILE 2: 00967 772755202 Email: info@techpio.net Trah pies 


lw Burn New folder 5 > Hm» 9 

Name E Date modified Type Size 

-ETA File folder‏ م 715/60/17 PIE‏ ال 

styles Y-M/.o/lYa -ETA File folder‏ لل 

>“ css3 Y-M/-«o/1Y a «ETÀ Cascading Style S... 6KB 
= custom 7١15/٠6/17م‎ «E:T Cascading Style S... 4KB 
"X IE] only Y-1£/-0/lY p «E: TA Cascading Style S... 1KB 
= اقرع‎ ١1/٠6/17 م‎ ET Cascading Style S... 1KB 
T iecss3.css Y-M/.o/lYa «E۹ PHP Script 2KB 
|&) index 7١15/٠6/17م‎ ‘2:۹ Firefox HTML Doc... 1KB 
= joomla Y-1£/-0/\Y a ‘E Cascading Style S... 14 KB 
|2 menu 715/٠0/17 م‎ «E: Cascading Style S... 5KB 
= modules Y-M£/-o/1Y a 3 Cascading Style S... 4KB 
T. system ١1/٠6/17 م‎ cE Cascading Style S... 4KB 
= template Y-ME/.o/i£g 1۲:1 Cascading Style S... 7KB 
= template rtl 7١15/٠6/7 a «E: T8 Cascading Style S... 6KB 
"L typography Y-M/-o/1Y p ‘E: Cascading Style S... 8 KB 


لدينا الكود التالي والذي سنضيفه لتحسين مظهر عناصر القائمة من حيث الحجم والخط على بعض الاسطر وتعديل ما يلزم وعدم تكرار خاصية معينة: 
font-family:"Times New Roman", Times, serif;‏ 

font-weight:bold; 

font-size:15px; 


كما في الصورة أعلاه نقوم بفتح الملف على دريم ويفر وننتقل للسطر Y‏ والاسطر التي بجانبها وكلها خاصة بالقائمة حسب المشار لنا من الاداة 
سيكون الملف كما في الصورة: 


$hornav ul.level-0 > li.menu-item, 
fsublevel ul.level-1 > li.menu-item(display:block;float:left;margin:0;padding:0) 


Qn ظر‎ CQ 


am 


fhornav ul.level-0 > li.menu-item > a.menu-item:hover, 

fsublevel ul.level-1 > li.menu-item > a.menu-item:hover (background:url(../images/hornav active.png) 50% bottom no-repeat; 
font-family:"Times New Roman", Times, serif; 

font-weight:bold; 

font-size:15px;)! 

$sublevel ul.level-1 > 1i.menu-item.active {background-color : #000} 


0 


Oo‏ ماه 


3 
3 


دم يم 


fhornav ul.level-0 > li.menu-item > a.menu-item, 

fsublevel ul.level-1 > li.menu-item > a.menu-itemt 

font-family:"Times New Roman", Times, serif; 

font-weight:bold; 
font-size:15px;color:£fff;display:block;line-height:normal;text-decoration:none;margin:0;padding:15px) 


[LN u 


o 


J 


fhornav ul.level-0 » li.menu-item » a.menu-item, 

fsublevel ul.level-1 > li.menu-item > a.menu-itemí 

font-family:"Times New Roman", Times, serif; 

font-weight : bold; 

font-size:15px; 
color:£éfff;display:block;line-height:normal;text-decoration:none;margin:0;padding:15px) 


ںا (Q w OQ Q OQ OQ‏ كلم 
iD ©‏ د 


وسيكون شكل القائمة بعد تعديل كود CSS-I‏ كما في الصورة: 


MOBILE: 00967 714490030 : 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


الرئيسية خدماتنا ‏ حول رواد التكنولوجيا ١‏ الأقسام أخبار رواد التكنولوجيا ‏ اتصل بنا 


هد ألا الرواد لتكنولوجيا المعلومات 


TECHNOLOGY PIONEERS WR 


تصمم شيكات ينحنت التعتيات ويكل احترافية aui,‏ خدمات الصيانة للحاسيات والشيكات 


وبهذا اصبح لدينا موقع كامل من نظام جوملا. وسيكون شكله النهائي كما في الصورة: 


MOBILE: 00967 714490030 200000 
MOBILE 2:00967 772755202 Email: info@techpio.net Add nies 


الرواد لتكنولوجيا “logleoll‏ 


في الجزء التالي لدينا بعض الاضافات الهامة للموقع والتي سنقوم بتركيبها. 


MOBILE: 00967 714490030 RR 
MOBILE 2: 00967 772755202 Email: info@techpio.net secl st 


Yt. 


catal‏ التواصل والمواقع الاجتماعية 

نحتاج في المواقع وسيلة توصل مباشرة من خلال الموقع البريد الالكتروني مباشرة. هناك ميزة في جوملا لعمل فورم جاهز للتوصل وهناك موديول 
جاهزة يتم تركيبة على نظام الموقع جوملا وتعيين بريد الكتروني خاص في هذا الموديول ويتم ارسال الرسالة الشخص المتصفح الى هذا البريد 
الالكتروني. 


(mod. sp. quickcontact. j25) تركيب موديول‎ 


سنقوم بتركيب الموديول الخاص بالتواصل على الموقع وسيكون في صفحة اتصل بنا على يسارها ومن لوحة التحكم (مدير الاضافات) ثم رفع وتنصيب 
الموديول على الموقع بنفس الطريقة التي تعلمناها وبعد التركيب من لوحة التحكم (مدير الموديولات) وسيظهر كما في الصورة: 


| -a اختبار‎ - jw - اختيار ستو الوصول‎ - [m - اختبار النوع‎ - | m - اختبار الموضع‎ - fj- اختبار الحالة‎ - ١ [m | البحث إعادة التعيين الموقة‎ XN 

kena e em 2‏ الترتيب التوع الصقحات مستوى الوصول اللغة ارقم التعريت 
Public WOWSlider Module1 o WOWsSIider Module1‏ الجميع 91 

94 الجميع‎ Public SP Quick Contact 0 فوري)‎ de o ISP Quick Contacts li 


التفاصيل 

الاسم إرسل رسالة 

ug العتوان © إظهار‎ Je 

الموضع right‏ تحديد الموضع 

الحالة هنشور r‏ 

v Public مستوى الوصول‎ 

الترتيب 1. ارىل رسال Y‏ 

بداية التتر 0000-00-00 00:00:00 | 43" 

تاريخ انتهاء التتر 0000-00-00 00:00:00 | ‘Ša‏ 

v الجميع‎ iam 

رقم التعريف 94 SP Quick Contact‏ الموقع 
وصف الموديول !SP Quick Contact - Ajax based Quick Contact Module for Joomla‏ 


من خلال الصورة أعلاه قمنا بعمل الاسم المناسب للموديول ثم حددنا إظهار للعنوان ثم تحديد الموضع إلى (right)‏ ثم الحالة (منشور). 


الصورة التالية من الاعدادات: 


تعيين الموديول على الصفحات لمحددة فقط M‏ 
قائمة الاختيار: "CNN‏ الغاء التحديد | | تحديد الكل 
User Menu Top Main Menu Fruit Shop | Australian Parks | About Joomla‏ 
تبديل التحديد | | الغاء التحديد | | تحديد الكل 
الرئيسية 
خدماتنا 


MOBILE: 00967 714490030 "rv md 
MOBILE 2: 00967 772755202  Email:infoetechpio.net Avid nies 


ألم 
قمنا بتحديد (على الصفحات المحددة فقط) ثم من (Main Menu)‏ اخترنا العنصر اتصل بنا. 


بقية الاعدادات: 


ج الخيارات الأساسية 


en yusuf&yahoo.com| Admin Email 
ت رسال الرسالة بنجاح..شكرا لتوصلك‎ Notice Sendmail Success 
هناك مشكلة..لم يتم الارسال الرجاء اعادة المحاولة.‎ Notice Sendmail Failed 


۾ خيارات متقدمة 


من الاعدادات على الجهة اليسرى للموديول. Admin Email‏ وتعني البريد الالكتروني لمدير الموقع والذي ستصل اليه رسائل الزوار او المرسلين. 
الحقل التالي لتعيين رسالة نجاح الارسال وهي كتابة جملة تبلغ المرسل بإتمام عملية الارسال بنجاح. الرسالة التي تليها رسالة بفشل عملية الارسال 
عند حدوث خطأ ما. (ملاحظة: الموديول يعمل فقط على سرفر حقيقي). 


سيكون شكل المودويل في صفحة اتصل بنا كما في الصورة: 


الرنيسية كدماتنا ‏ حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا ‏ اتصل بنا 


MNA‏ الرواد لتكنولوجيا المعلومات 


TECHNOLOGY 


TECHNOLOGY PIONEERS 


اتصل بنا cha‏ رسالة 
تاريخ التشر كتب بواسطة: SuperUser‏ © المجموعة: عام وع الزيارات: 12 تك ت 


..Name 
...Email رواد التكنولوجيا‎ 
Subject PLovveer ¥ 
...Message 
رواد التكنولوجيا شارع حده‎ 
00967772755202 : تلقرن‎ 


00967772755202 : sut 


en yusuf(gyahoo.com : البريد الإلكتروتي‎ 


SEND MESSAGE 


جوال + واتساب : 00967772755202 


أو عبرصتحاتنا الاجتماعية 


لاحظ تم تركيب الموديول بنجاح وتبقى فقط تعريب الموديول وسنتعلم في بعد كيفية تعريب المودويلات. 


MOBILE: 00967 714490030 "cmd d 
MOBILE 2:00967 772755202 Email: info@techpio.net Aic pice 


MEAT 


ربط ]2392 بصفحات التواصل 

:mod, sp, facebook تركيب موديول‎ 

يعتبر من الموديولات المميزة في والتي نقوم باستخدامها في ربط المواقع الالكترونية بصفحة التوصل الاجتماعي الفيس بوك ومن خلال الموديول نضع 
رابط الصفحة الخاصة بنا وبعض الاعدادات التي نريد كيفية ظهورها. 

نقوم برفع وتنصيب الموديول على الموقع الخاص بنا وذلك من لوحة التحكم ثم مدير الاضافات وبعد ذلك رفع وتنصيب للملف. بعد التنصيب نذهب لمدير 


الموديولات وسنلاحظه كما في الصورة: 


الصفحات مستوى الوصول p‏ رقم التعريف 


الاسم الحالة الترتيب التوع 
WOWSlider Module1 0 o WOWSIider Module1‏ دي) Public‏ الجميع 91 
E Public SP Facebook 0 6 SP Facebook‏ 95 
eo Archived Articles‏ 1 أرشيف المقالات المحدد Public X‏ الجميع 


كما نلاحظ أعلاه الموديول (SP Facebook)‏ نقوم بفتحه وستكون الاعدادات الخاصة به كما في الصورة: 


التقاصيل 

الاسم * کن على تواصل 

إظهار العنوان © إظهار eu‏ 
الموضع bottom1‏ تحديد الموضح 
الحالة منشور M‏ 


v Public 


TTE 


0000-00-00 00:00:00 | 23" 
0000-00-00 00:00:00 | 23" 
اللغة الجميع M‏ 
رقم التعريف 95 SP Facebook‏ الموقع 
وصف الموديول SP Facebook - All in one facebook module for joomla by JoomShaper.com‏ 
تعيين الموديول على كافة الصفحات 
قائمة الاختيار: بد الغا يد يد الك( 


كما في الصورة أعلاه للإعدادات التي على يمين الموديول قمنا بعمل o‏ خطوات (تعيين الاسم - تعيين إظهار - تعيين الموضع واخترنا bottom]‏ — 


تعيين الحالة منشور - تعيين القائمة واخترنا : على كافة الصفحات). 


MOBILE: 00967 714490030 Www.techplomnet 
MOBILE 2: 00967 772755202 Email: infoetechpio.net l : 


4 الخيارات الأساسية 


Activity Feed Options > 


^ 


Comments Options 


A 


Facepile Options 


4 


Like Box Options 


scebock.com/TechPio Facebook Page URL 

200 Width 

83 Height 

Y Light Color Scheme 

Yes No '* Show faces 
Yes No © Show stream 
Yes No '* Show header 
Yes No ها‎ Show Border 


Like Button Options € 
Recommendations Options <4 
Send Button Options 4 


4 خيارات متقدمة 


من الجانب الآخر للإعدادات أعلاه نختار (Like Box Options)‏ والاعدادات كالتالي: 

(Facebook Page URL)‏ : نضع رابط الصفحة الخاصة بنا في هذا المكان. 

(Width - Height)‏ : الطول والعرض. 

(Dark) مظلم‎ Uia 5 أو الخيار الاخر‎ (Light) كما هو ويعني اللون بالنسبة للنص والخلفية ولديك إما مضيئ‎ AS i (Color Scheme) 
عرض الصور الشخصية للمعجبين او المتابعين للصفحة.‎ : (Show faces) 

(Show stream)‏ : عرض المشاركات التي وضعتها الصفحة. 

(Show header)‏ : عرض راس الصندوق الخاص بالأعجاب. 

(Show Border)‏ : عرض حواف للصندوق. 


وسيكون شكل الموديول في الموقع بعد الحفظ والاغلاق كما في الصورة: 


MOBILE: 00967 714490030 WERE Rm 
MOBILE 2:00967 772755202 Email: info@techpio.net Vra ss 


E 


وكما نلاحظ ظهور الصفحة الخاصة برواد التكنولوجيا وبدون عرض لصور المتابعين ولدينا في الموديول الكثير من الخصائص ويمكنك تجربتها 
وملاحظة النتيجة. 
تركيب الإضافة المساعدة (plg. bt. socialshare)‏ 


تعمل هذه الأداة على ربط جميع المقالات الخاصة بالموقع مع صفحات التواصل الاجتماعي مثل : فيس بوك — تويتر — جوجل بلاس وغيرها ويمكننا 
اضافتها أو تركيبها من مدير الإضافات وتصيبها ورفعها على الموقع صورة للأداة في بعض المواقع: 


HES GEE) o is in ا‎ 3 
| 


(V) Also post on Facebook Posting as Yusuf Al-Joraee (Change) 


كما نلاحظ في الصورة السابقة لاحد المواقع التي تستخدم الاضافة المساعدة التي سنقوم بتركيبها الان. بعد ان نقوم بالرفع والتنصيب من لوحة التحكم 
من القائمة (الإضافات) ثم (مدير التطبيقات المساعدة) وسيتم فتح الصفحة التالية: 


E‏ البحت | | إعادة التعيين - اختياو الحالة - [v‏ |-اختياراتوع- ___” | | - اختيار مستوى الوصول - ف 
اسم التطبيق المساعد الحالة mmm MI s RS "T‏ 
المصادقة - جوملا Public joomla authentication 0 o‏ 401 
مصائقة - Public gmail authentication o GMail‏ 400 
توتيق - Public idap authentication o LDAP‏ 402 
التحقق - Public recaptcha captcha 0 o ReCaptcha‏ 439 
Public bt socialshare content 0 o o‏ 10019 
المحتوى - تحميل الموديولات ]7[ 0 Public loadmodule content‏ 406 


وكما نلاحظ أسم الاضافة (Content - BT Social Share)‏ وامامها العلامة الحمراء والتي بحاجة الى تفعيل ولكن بعد عمل الاعدادات اللازمة. نقوم 
بفتحها وستكون الاعدادات كما في الصورة: 


التفاصيل 
الحالة FACEBOOK Content - BT Social Share MET‏ > 
مستوى الوصول b TWITTER M Public‏ 
الترتيب 0. المحتوى - dax‏ الموديولات M‏ 
نوع التطبيق المساعد LINKEDIN content‏ > 
ملف التطبيقات المساعدة bt socialshare‏ 
رقم b GOOGLE PLUS 10019 UT‏ 
الوصف 
STUMBLE‏ > 
b DIGG BT SOCIAL SHARE PLUGIN VERSION 2.3.5‏ 
pu Mk BT Social Share plugin adds all major Social Networks into your Joomla articles. Plugin can be‏ 
ADVANCED CONFIG [- qoo N published at various locations in content, with 2 options display top or bottom of article. Plugin has‏ * 
backend settings where you can customise it. You can enable/disable each social network‏ اسيك 
individually or show or hide them on specific sections, categories, individual articles or specific‏ - 
Button pretext menus‏ 


Comment pretext 


INTEGRATING EXTERNAL CODE 


Single Article x :Enabled plugin for 
php? 
('JPlugirHelper::importPlugin('content 
Below article x Joomla Content Position (skare = plgContentBt socialshare::socialButtons$ 
echo $share['script']; // Required 
echo $szhsre['buttonz'] // Socisl button 
Above article x K2 Position echo $share['recommenrd'] // Recommendation bar 


echo $share['comment']; // facebook comment box 


Add og tag 


C A 
Cr» Use Document Title 


MOBILE: 00967 714490030 ; 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


1° 


تم تعيين (مفعل) على الاضافة في يمين الاعدادات وتم الانتقال الى (ADVANCED CONFIG)‏ وتم تعيين الخيار (Single Article)‏ في 
.Enabled plugin for‏ تعيين (Below article)‏ في Joomla Content Position‏ فقط وترك بقية الاعدادات كما هي. 


نقوم بفتح أي مقالة لدينا في الموقع وسنرى الاضافة في نهاية الصفحة كما في الصورة: 


تصاميم مواقص الكترونية 


تقوم رواد التكنولوجيا بتصميم المواقع الرسمية لجميع الجهات وبمختلف توجهاتها الصحية والحكومية والسياحية والتجارية وغيرها 


HESS GED 0) o il لام‎ ce 


nis Add a comment. 


Î Also post on Facebook Posting as Yusuf Al-Joraee (Change) 


نعريب الموديولات 

يتطلب منا أحيانا تعريب المودويلات أو المكونات الاساسية ليكون الموقع باللغة العربية ولأن جوملا نظام متكامل ومن خلاله يمكننا تعديل أي كود كذلك 
اللغة العربية لها مجلد وملفات خاصة بها وكل موديول او مكون له ملفاته الخاصة به بالنسبة للغة العربية وكمثال على تعريب أحد الموديولات سنقوم 
بتعريب الموديول الخاص بالتواصل (mod, sp. quickcontact j25)‏ وذلك بالوصول لملف اللغة الخاصة به والخطوات كالتالي: 


من داخل مجلد الموقع يمكننا الوصول لملف اللغة من خلال فتح المجلد (language)‏ ثم المجلد (en-GB)‏ وسيظهر لنا ملفات كثيرة ومنها ملف 
الموديول الذي نريد تعديله وسيكون اسمه (en-GB.mod, sp. quickcontact)‏ كما في الصورة: 


Burn New folder =z EM ©‏ دا 
Name z Date modified Type Size x‏ 
INI File 1KB |‏ °1۲ ص i. en-GB.mod related items 7١15/١5/7١‏ 
lY INI File 1KB‏ ص en-GB.mod related items.sys 7١15/٠5/7١‏ |_| 
L| en-GB.mod search THZ.i/Te-X INI File 3 KB‏ 
 INIFile 1KB‏ 1۲“ ص en-GB.mod_search.sys 7١15/٠5/5١‏ | 
a «E:YA INI File 4 KB‏ لا en-GB.mod slideshow pro sp2‏ ]| 
en-GB.mod sp quickcontact Y-M/.o/l£a-tii INI File 1 KB‏ | | | 
en-GB.mod_sp_simple_youtube Ye1E/-0/1T a ‘ETA — INIFile 1 KB‏ |_| 
AY INI File 28‏ ص + L| en-GB.mod stats 7١15/١5/7‏ 
KY INI File 1KB‏ ص en-GB.mod stats.sys 7١15/٠5/7١‏ |_| 
«MY INI File 2KB‏ ص en-GB.mod syndicate 7١1١5/٠١5/7 ١‏ |_| 


MOBILE: 00967 714490030 O CIE 
MOBILE 2: 00967 772755202 Email: infoetechpio.net j pur 


نقوم بفتحه ببرنامج الدريم ويفر كما في الصورة: 


M ADMIN EMAIL-"Admin Email" 

2 ADMIN EMAIL DESC-"Please enter your wmail id." 
I] nane- EnaA" 

E EMAIL-"Email..." 

EE SUBJECI-"Subject..." 

MESSAGE-"Message..."‏ | ك3 

4 SEND MESSAGE-"Send Message" 

8 WAIT TEXT-"Please wait..." 

9 FAILED TEXT-"Email not sent!" 

10 ERR MSG-"All highlighted fields are required." 
11 EMAIL WARN-"Please enter a valid Email." 

12 SUCCESS NOTICE-"Notice Sendmail Success" 

13 FAILED NOTICE-"Notice Sendmail Failed" 


كما في الصورة أعلاه نقوم بتغيير ما بين علامتي التنصيص كما في السطر Y‏ سنكتب بدلا عن (Name...)‏ التعريب والترجمة الخاصة بها وهي 
(الاسم..) وكذلك البقية بنفس الطريقة وسيكون الشكل بعد التعريب كما في الصورة: 


ode سمحماشتعيز‎ ey) | هذ‎ QA. Mf. pL كنج‎ © Te: | | 
ADMIN EMAIL-"Admin Email" 

ADMIN EMAIL DESC-"Please enter your wmail id." 
NAME=" puyi..." 

EMAIL=" 5,,1&$ Jy! "..البيريد‎ 

SUBJECT-"t ppa 6. ." 

MESSAGE-"à4 jL,j, 3| .." 

SEND MESSAGE-"i jL5, 3| Jej!" 

WAIT TEXT-"jLBioy! "الرجاء‎ 

FAILED TEXT-"JL2jY! "!..لم يتم‎ 

ERR MSG-"i,;,lhs "!..جميع الحقول‎ 

EMAIL WARN-", 3,,34 JJ! ".الرجاء التأكد من صحة البريد‎ 
SUCCESS NOTICE-"Notice Sendmail Success" 

FAILED NOTICE-"Notice Sendmail Failed" 


1 
2 
3 
4 
5 


له 


تن ماه 


فر قم فم قم 
هم يم Ww‏ 


كما نلاحظ قمنا بتعريب النصوص التي تهمنا والتي تظهر للمتصفح للموقع وسيكون شكل الموقع في صفحة (اتصل بنا) كما في الصورة: 


الرنيسية خدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا اتصل بنا 


MNA‏ الرواد لتكنولوجيا المعلومات 


TECHNOLOGY PIONEERS 


TECHNOLOGY 


اتصل بنا . ارسل رسالة 


تاريخ التتر كتب بواسطة: ae deg (D) SuperUser‏ الزيارات: 14 


"m 
رواد التكلولوجيا البريد الإلكتروتي..‎ 
الموضوع..‎ Pioneery 
الرسالة..‎ 
شارع حده‎ PESE 
00967772755202 : xt 
` 00967772755202 : تتقاكس‎ 
إرسال الرسالة‎ en yusuf(gyahoo.com : البريد الإلكتروتي‎ 


جوال + واتساب : 00967772755202 


أو عبرصتحاتنا الاجتماعية 


MOBILE: 00967 714490030 : 
www.techpio.net 


MOBILE 2: 00967 772755202 Email: infoetechpio.net 


۳۹۷ 
كما نلاحظ تم تعريب الموديول على يمين الموقع كما في الصورة اعلاه وظهور جميع النصوص باللغة العربية. 
إضافة موديول البحث 


يعتبر موديول البحث من أهم الموديولات في الموقع وسهل التركيب فمن لوحة التحكم ثم (مدير الموديولات) نبحث عن الموديول (Search)‏ نقوم بفتح 
الموديول وعمل الاعدادات اللازمة كما في الصورة: 


التقاصيل À‏ 
+ الخيارات الأساسية 
الاسم * البحت 5 صتدوة ال 
عبارة صتدوق الي 
إظهار العنوان © إظهار © in‏ قياس عرض Jia‏ البحت 20 
اس عرض حقل الب 
الموضع search‏ تجديد الموضع نص مريع البحت أبحث هنا . 
الحالة M aia‏ زر البحت © Y‏ دم 
مستوى الوصول cad ¥ Public‏ 3 
موضع زر # an‏ 
تيب LEVE!‏ 
Fe]‏ | صورة زر البحت © E y‏ 
بداية التتر 0000-00-00 00:00:00 | "à3‏ 
نص زر البحت البحث 
تاريخ انتهاء النتر 0000-00-00 00:00:00 | a‏ 
| كتف تقنية cad‏ المفتوح emo Y‏ 
اللخة M E‏ 
عنوان محرك الببحت المقتوح 
50 ضبط رقم تعريف الما 
rem 35 dus d‏ الموقع رقم تعريفا 
وصف الموديول هذا الموديول يعرض &à ja‏ نص البحث. 
4 خيارات متقدمة 
تعيين القاتمة 
تعيين الموديول على كافة الصقحات * 


كما في الصورة أعلاه وضعنا اسم الموديول حددنا (إظهار) وحددنا الموضع (search)‏ في تعيين القائمة حددنا (على كافة الصفحات) وفي الاعدادات 
على اليسار كما تلاحظ. وسيكون شكل موديول البحث في الموقع كما في الصورة: 


الرنيسية خدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا ‏ اتصل بنا 


MNA‏ الرواد لتكنولوجيا المعلومات 
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۳1۸ 
تعديلات عامة 
بعد أن أتممنا عمل الموقع وقبل إطلاقه سيكون لدينا بعض التعديلات النهائية وهي : 
إضافة محرر جديد للموقع. 
وضع اسم مطور الموقع على الصفحة الرئيسية. 
إضافة المحرر (JCE Editor)‏ 


المحرر هو أحد الإضافات الهامة والتي تتحكم بمحتوى الموقع ولدينا هنا أحد المحررات المميزة الذي يقوم بعمل محتوى مخصص حسب رغبة مدير 
الموقع من اضافة نصوص وتعديلها حجما ولونا وغير ذلك اضافة لعمل الروابط والأكواد (HTML)‏ وغيرها وهذه صورة عامة للمحرر: 


e! B IU ج‎ 25 2 = 3 u| Paragraph = Styles = 2 g 
Font family = Font size = A > Zr xE È E E 8 AE pA | ع‎ me 
TT E EB [ol A Ha 7- 
Path: p Words: 0 E 


تركيب المحرر (JCE)‏ 


بعد تحميله من موقعه الرسمي (www.joomlacontenteditor.net)‏ نقوم بفتح الموقع الخاص بنا وفتح المجلد (tmp)‏ ونسخ الملف الخاص 
بالمحرر إلى داخل المجلد وفك الضغط الى ملف وتسميته بأي اسم كما في الصورة: 


Organize > Include in library > Share with vw Burn New folder 

lr Fos Name Date modified Type Size 
BE Desktop لكل‎ com 7١11/٠6/١١ ص‎ ۰3:۱ File folder 
" Downloads B com jce 1۰15/0/1 p «El WinRAR ZIP archive 1,607 KB 
| Recent Places © index YHM/.E/T- ص‎ -KYY Chrome HTML Do... 1 KB 


كما نلاحظ أعلاه قمنا بنسخ الملف الخاص بالمحرر وقمنا بفك الضغط إلى مجلد واسميناه com‏ . نذهب للوحة التحكم ثم (مدير الاضافات) وكما في 
الصورة: 
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AL 


رقع وتتصيب ملق الحرمة الموجودة على الجهار 


ملف الحزمة | No file chosen | Choose File‏ رفع وتنصيب 


التتصيب من ميلد دليل موجود Jai ga Daum‏ 


مجلد دليل التنصيب CAwampwww'Joomla 2.5tmpicom‏ — 


التتصيب من موقع إتترتت خارجي 


رابط حزمة التنصيب http‏ التتصيب 


Bay‏ في التنصيب لم نقم بعملية التركيب كبقية الاضافات والسبب لأن حجم المكون(المحرر) كبير بالنسبة للموقع على (localhost)‏ ولو كان على 
سرفر حقيقي لكان بالإمكان التركيب كأي اضافة ولكن هنا نقوم بعملية (التنصيب من مجلد ..) كما في الصورة حددنا مجلد دليل التنصيب وحددنا اسم 
الملف والمسار بعد ذلك نقوم بعملية (التنصيب) والضغط على الزر. وسيتم التركيب للمكون. وعلينا أن ننتبه للمسار وطريقة وضعه وأن يكون صحيحا 
كما في الصورة وغالبا ما تكون (V)‏ الأخيرة معكوسة نقوم بحذفها وكتابتها من جديد. 


بعد تركيب المحرر نقوم بتعيينه كمحرر افتراضي وذلك من خلال لوحة التحكم ثم (الاعدادات العامة) وسيتم فتح الصفحة التالية: 


إعدادات الموقع إعدادات SEO‏ 

اسم الموقع * ;25 التكتولوجيا | Technology Pioneers‏ الروابط الصديقة لمحركات البحت e‏ تعم Y‏ 
الموقع $a‏ تعم © لا دار رو قبط © y‏ 

m © rewriting استخدام روابط‎ 3c 
y @ إلى عناوين الانترنت کد‎ (him) رسالة اغلاق الموقع إخقاء © استعمال رسالة خاصة استعمال لغة الموقع الاقتراضية للرسالة يضيف لاحقة‎ 
yG E رسالة الموقع خلال إيقافه التحديت والصيانة | انموقع مغلق مؤقتاً للصيانة والتحديت.<إط /> تفضز الأسماء المستعارة بالرمز الموحد‎ 
" iss بانزيارة في وقت لاحق.‎ 
r ï تضهين اسم الموقع في عناوين الصقحات‎ Aaa 


صورة رسالة الموقع خلال إيقافه e"‏ 


T Editor - JCE 


إعدادات سجل المتصقح ‏ الكوكيز- 
المحرر - CodeMirror‏ 


JE ال | اسم نطاق‎ 
y | TinyMCE - saa 
مسار الكوكيز‎ 
Y 20 
v 10 


بريد الإلكتروني للكاقب _ T‏ 


من خيارات (المحرر الافتراضي) نختار (Editor - JCE)‏ كما في الصورة أعلاه ثم حفظ وإغلاق. 


يمكننا إضافة الحقوق للموقع أو للمالك فمن خلال إعدادات القالب يمكننا تعديل الحقوق فمن لوحة التحكم (مدير القوالب) ثم ) - shaper. spectra‏ 
(Default‏ وستظهر الاعدادات كما في الصورة: 


Yes ® No Show Copyright Info 

Copyright Info‏ جميع انحقوق محفوظة لرواد 
التكنونوجيا 

Yes No O Show Helix Logo 

Y Light Small Logo Helix Logo Type 

{Designed by {JoomShaper Designed by 
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Ya 


كما نلاحظ أعلاه اضفنا الحقوق لمالك الموقع وايضا حددنا (NO)‏ لشعار الفريمورك (helix)‏ سيكون شكل الحقوق في الموقع كما في الصورة: 


ملاحظة : يمكننا حذف محتوى الفوتير كاملا ووضع اي بيانات أخرى في حالة كنا نعمل في مجال إنشاء المواقع بالإضافة الى تعديل أي كود ضمن 
القالب ولكن كل ذلك في حالة شراء ترخيص القالب من الشركة المصممة له. 


a £e + ^*^ A ٠ 
إضافة عنوان رئيسي للموقع‎ 
(Main Menu) بقي لدينا عمل عنوان للموقع باسم المؤسسة المالكة أو المالك للموقع ليظهر في شريط الموقع ولعمل ذلك من لوحة التحكم (القوائم)‎ 
الاعدادات كما في الصورة.‎ à ثم نفتح (الرئي ية) ود تكو‎ 


التقاصيل 
4 خيارات تموذج العرض 
توع عنصر القائمة * المقالات المميزة x E‏ 
4 إعدادات المقال 
اسم القائمة * الرئيسية 
یس 4 خیارات الدمج 
- ج 
الاسم المستعار rome:‏ 
homepsge‏ 4 خيارات توع الرايط 
v = uw‏ خيارات عرض الصقحه 
الرابط index.php?optionzcom, content&viewzfestured‏ ع 
عتوان صقحة المتصقح الرواد لتكنولوجيا المعلومات | io‏ 
Aria i‏ 3 
إظهار ترويسة الصفحة E e‏ 
مستوى الوصول Public‏ 3 
ويسة الصقحة 
مكان القائمة * M Main Menu‏ 
العنصر الأم جنر عنصر القائمة 7 
الترتيب الرئيسية M‏ 
خيارات الكلمات المقتاحية 
طريقة فتح النافذ: القلمة M‏ لذ عا - 


من الصورة أعلاه على يسار الاعدادات (خيارات عرض الصفحة) وفي حقل عنوان صفحة المتصفح نقوم بكتابة اسم الموقع وسيكون شكل شريط 
الموقع بعد الحفظ والاغلاق كما في الصورة: 


puc x 7 y Pioneers | رواد التكنولوجيا‎ DER o | الرواد لتكنولوجيا المعلومات‎ x VE الرئيسية‎ x Y 
© | D localhost/Joomla 2.5 


| الرواد لتكنولوجيا المعلومات‎ | TechPio 


إضافة البيانات الوصفية 
من البيانات المهمة للموقع اضافة بيانات عامة تصف الموقع بشكل عام بالإضافة للكلمات المفتاحية الخاصة بالموقع والمهمة لمحركات البحث ولعمل 
ذلك من خلال لوحة التحكم (الاعدادات العامة) وستكون كما في الصورة: 
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NEN 


إعدادات الموقع 

Technology Pioneers | التكنولوجيا‎ J33 9 الموقع‎ 2d 

e E الموقع مغلق‎ 

رسالة اغلاق الموقع إخقاء 9( gua)‏ رسالة خاصة استعمال لغة الموقع الاقتراضية للرسالة 


رمالة الموقع خلال إيقافه التحديت والصيانة | ازموقع مغلق Lijo‏ ننصيانة وانتحديث.<ءط /> jais‏ 
بانزيارة في وقت لاحق. شكراً 
penen P‏ 


صورة رسالة الموقع خلال إيقافه تحديد | maan)‏ 


M Editor - JCE * المحرر الإفتراضي‎ 


v -J يدون‎ - 


M Public 
" 20 

حد التغذية الأخبارية الإفتراضي 10 Y‏ 

بريد التغذية الأخبارية البريد الإلكتروني Yo CBE‏ 


إعدادات البياتات الوصقية 


البيانات ال A m - xu 5 5 ál ái‏ 
البيانات الوصقية للموقع رواد اتتكتولوجيا موقع متخصص قي تصميم وتطوير المواقع 
الانكترونية 


الكلمات المفتاحية CEU‏ الوصفية الخاصة بالموقع مواقع,انكترونية,تصميم,تطوير,استضاقة,رواد,انتكنونوجيا 


M Index, Follow (Robots), 


حقوق المحتوى 


كما في الصورة اعلاه لاحظ الحقل (البيانات الوصفية للموقع) تم تعبئة الحقل بسطر او سطرين نبذة عامة حول الموقع. في الحقل الذي يليه (الكلمات 
المفتاحية) وهي كلمات مفصول ب(,) وهي الكلمات التي نريد من محرك البحث أن يبرز الموقع الخاص بنا في حالة تمت كتابة احد هذه الكلمات فيه. 


حذف البيانات التجريبية 


قبل رفع الموقع واطلاقة لابد من تنظيف الموقع من جميع البيانات الافتراضية وخصوصا التي اضفناها اثناء تركيب جوملا سواء المجموعات او 
الموديولات او المقالات وسنقوم بحذف هذه البيانات من خلال (مدير المقالات) (مدير الموديولات). 


تد فيز د خة من الموقع للرفع 


إنشاء نسخة من الموقع 


بعد أن انتهينا من إنشاء الموقع بواسطة جوملا وقمنا بتركيب الموديولات والمكونات الاساسية والاضافات واضافة وتعديل ما يلزم نقوم الان بعملية 
الرفع للموقع. سنحتاج في عملية تجهيز الموقع الى اضافة جديدة للموقع وتقوم هذه الاضافة بعملية تجميع ملفات الموقع وقاعدة بيانات الموقع ايضا 
ضمن ملف واحد. 


تركيب إضافة (com. akeeba)‏ 
نقوم بتركيب الاضافة بنفس طريقة تركيب المحرر (JCE)‏ راجع الطريقة. 


بعد التركيب من قائمة لوحة التحكم (التطبيقات) ثم (Akeeba Backup)‏ كما في الصورة: 
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— 4 JCE Editor [fj 
1 Hm imr إعادة التوجيه‎ ^ 


چ . 
z 60‏ 
19 الإعلاتات 4 
إضافة مقال جديد هدير المقالات مدير الوسائط المتعددة دير القوائم مدير المستخدميزد 
g ٤‏ ير ER‏ الباحث الذي .ير الو مدير القوا E‏ ين 
s‏ 
O‏ البحث 
Ha CAE‏ 
E d‏ التغذيات الإخباري 4 
— عم الرسائل الخاصة 4 
"e; za E‏ 
مدير الموذيولات مدير الإضافات الإعدادات ١‏ مدير القوالب تعديل الملف الشخصي 
n‏ جهات الاتصال 4 
© دليل الموا اقع 4 
E‏ 
JCE File Browser‏ لديك آخر تسخة من Da ga‏ لديك آخر اصدار من كل 
الإضافات 


سيتم فتح الصفحة الخاصة بالترخيص والموافقة على القوانين الخاصة بالإضافة وسيكون علينا الضغط على الزر البرتقالي. بعد الانتهاء من ذلك ستكون 
نعود للوحة التحكم ونعود للتطبيق وسيكون لدينا الصفحة التالية: 


AB $8 Akeeba Backup y 


المساعدة الخيارات 


Switch Profiles t3 * Default Backup Profile | Active Profile: #1 


Status Summary 
Basic Operations 


Akeeba Backup is ready to backup your site 


H (Akeeba Backup Core 3.11.0 (2014-05-06 
x ® o @ 24 g% 
Scheduling View Log Manage Backups Backup Now Configuration Profiles Configuration Donate via PayPal CHANGELOG 
Information 


Management Wizard 


Reload update information 


4 Backup Statistics 
Component 
Piani 2014-05-15 Start 
21:02 2014 الخمیس, 15 أيار‎ Backup taken on Description 


R Sa: 
Exclude data from the backup 3 


Backend Origin 

5 | o Full site backup Type 
Database Tables Files and 
Exclusion Directories 
Exclusion 


o 


من خلال الصورة اعلاه نضغط على (Backup Now)‏ والتي تحمل الأيقونة وض ده . وستظهر الصفحة التالية: 
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$$ Akeeba Backup:: Backup Now y 


Control Panel  ةدعاسلا‎ 


Control Panel Configuration Backup Now Manage Backups View Log 
Start a new backup 


Switch Profiles t3 v Default Backup Profile | Active Profile: 1 


14:06 2014 + 17 „= Backup taken on 


Short description 
This will appear in the Manage Backups page for your convenience 
Backup comment 
y 
This will appear in both the Manage Backups page and inside the backup archive (in the installation/README.html file) for your convenience 
Restore default S IBackup Now A 
2 CATE ee a ذه‎ * e PE 
نقوم بالضغط على الزر الأزرق وستظهر الصفحة التالية:‎ 
© © 
** Akeeba Backup:: Backup Now 


Control Panel  ةدعاسلا‎ 


Control Panel Configuration Backup Now Manage Backups View Log 


Please do not browse to another page unless you see a completion or error message لل‎ 


Backup Progress 


"n = Cw: la 2.5/compon: dels 


i Joon 


Last server response 3s ago 


من خلال الصورة أعلاه يتم عمل نسخة كاملة للموقع. وعليه يجب علينا أن Y‏ نقوم بعملية تنقل داخل الموقع والانتظار حتى تتم عملية النسخ للموقع 
كاملا وبعد انتهاء العملية سيتم ظهور الصورة التالية: 


Control Panel Configuration Backup Now Manage Backups View Log 


Backup Completed Successfully 


Congratulations! The backup process has completed successfully 
You can now navigate to another page 


View Log Manage Backups à 


من خلال الصورة أعلاه نقوم بالضغط على الزر الأزرق (Manage Backups)‏ وسيتم ظهور الصفحة التي فيها النسخ الاحتياطية كما في الصورة: 
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Manage & Download Size Profile Type Origin Status Duration F Start Description ID 


site-localhost-20140517-140650.jpa Mb 72.94 1 Full site Backend [ok] 00:01:17 2014-05-17 


14:06 2014 jJ 17 السيت,‎ Backup taken on 4 
Part 00d backup 


ظهرت لدينا النسخة الخاصة بالموقع وما علينا سوى القيام بتنزيل النسخة من الزر الذي على يسار النسخة أو الصورة ( MERE‏ وسیتم تنزيل 


النسخة على الجهاز. 


نقوم الان بنقل النسخة إلى أي مجلد في الجهاز كما في الصورة: 


Organize v Include in library v Share with v Burn New folder 


Eme 
TOUEENERESET ^ Name j Date modified Type Size 
RE Desktop | |_| Site-localhost-20140517-140650.jpa Y-MJ-o/IVp-cGYo JPA File 14,590 KB 
"n Downloads 


نلاحظ في الصورة اعلاه ملف مضغوط بصيغة معينة وتوجب عليها قبل الرفع للموقع فك الضغط عن هذه النسخة وضغطها مرة أخرى ولفك الضغط 
سنقوم بتحميل أداة متخصصة في فك الضغط لهذا النوع من الملفات وهي الأداة (AkeebaExtractWizard)‏ وينصح أن تكون النسخة في مجلد 


على سطح المكتب أو عدم وجودها في مجلد مسمى باللغة العربية. 


بعد تحميل الأداة وتركيبها على الجهاز نقوم بتشغيلها وستظهر كما في الصورة: 


[T] Akeeba eXtract Wizard 3.3 ) ها |[ ت‎ || 55 [ 
Extraction Options 
Archive file n NetiDesktopyjoomlasite-localhost-20140517-140650.jpa 
Extract to folder CAUsersV Yemen NetiDesktopNjoomlasite-localhost-20140' 
Password for JPS archives 


Ignore most errors 


Dry run (test without extracting anything) 


Extract! 


Extraction Progress 


we "9" 


administrator/components/com templates/views/template/tmpl/default.php 


Copyright ©2008-2011 Nicholas K. Dionysopoulos / AkeebaBackup.com 


كما فى الصورة أعلاه فى الخيار الاول حددنا مكان النسخة. والخيار الثانى يتم تحديده أتوماتيكى وسيتم الفك فى نفس مكان الملف المضغوط. ثم الضغط 
في في لي ينم ي وسيتم الفك في M‏ 


على الزر (Extract)‏ 


نذهب للمجلد التي فيه النسخة الخاصة بالموقع وكما في الصورة: 
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ردنا 


Organize v Open Include in library v Share with v Burn New folder 


* 


TETTE Name Date modified Type Size 
RE Desktop | ıJ; site-localhost-20140517-140650 Y*YE/«o/1V م‎ ٠0:5 File folder 
|j. Downloads |_| site-localhost-20140517-140650.jpa YaM/.e/ Wa -0:0 JPA File 14,590 KB 


T Recent Places 


كما نلاحظ تم فك النسخة الى المجلد بنفس الاسم للملف المضغوط. نقوم الان بعملية الضغط مرة آخرى وذلك عن طريق فتح المجلد المفكوك وتضليل 
الجميع ثم إرسال الى ( (Compressed Zipped Folder‏ كما في الصورة: 
Open Share with v Burn New folder‏ و Organize v‏ 


Name Date modified Type Size 


Favorites‏ علو 
RE Desktop ıJ administrator M ME A E a EL — riei‏ 
B Downloads ıl cache Share wah 4‏ 
E Recent Places il cli fu Combine supported files in Acrobat...‏ 
Avira‏ فحص الملغات المحددة باستخدام 3 di components‏ 
Bg Libraries Ji images SB Addto archive...‏ 
Ej Documents ıJ includes SB Add to "site-localhost-20140517-140650.rar"‏ 
d Me ıJ installation B Compress and email...‏ 
Wi Pictures Ji language FB Compress to "site-localhost-20140517-140650.rar" and email‏ 
E Videos |: libraries r‏ 
J legs Sendto d ijj Compressed (zipped) folder‏ 
Homegroup n media Cut BE Desktop (create shortcut)‏ ® 
ıJ modules gs [Ê Documents‏ 
jW Computer ıJ plugins k Fax recipient‏ 
Ê Local Disk (C:) |: templates Forano .J Mail recipient‏ 
New Volume (D:) J tmp Dee © Skype‏ وت 
New Volume (E:) "7 configuration Rename g TeamViewer‏ وت 
DVD RW Drive (G:)‏ فلك New Volume (F:) |_| htaccess Properties‏ وت 
W iPhone صlllYem |% index 41# 8 iPhone liliYemen Net‏ 
LICENSE Y«1£/«0/1V p «e£ Text Document 18 K8| 3‏ |_| 
README Y-NL/+0/\V a «mil ^ Text Document 5KB|‏ ل ia Network‏ 
6:5١ Text Document 1 K8|‏ م jW YEMENNET |_| robots Y«Y£/«0/YV‏ 
٠6:١ Text Document 2 8|‏ م i. web.config Y-1£/«0/YV‏ 


بعدها سيتم ضغط جميع الملفات في ملف مضغوط واحد. 


ركع الموقع 
بعد ان قمنا بتجهيز نسخة من الموقع وضغطنا الموقع الجاهزة ستكون عملية الرفع مشابهة لعملية الرفع للتطبيق الخاص PHP‏ (راجع الرفع). 


تركيب الموقع 
بعد رفع الموقع الالكتروني للسرفر او المجلد العام للموقع الجديد نقوم بفك الضغط للملفات كاملة aig‏ نقوم بعمل قاعدة بيانات جديدة للموقع لكي يكو' 
التركيب وتفريغ البيانات المضغوطة في هذه القاعدة. وقد تعلمنا مسبقا طريقة انشاء قاعدة بيانات جديد (راجع الفصل السابق). 


بعد عمل قاعدة البيانات نذهب للمتصفح والدخول على الدومين او الرابط الخاص بالموقع وستظهر صفحة التركيب كما في الصورة: 
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É start over M Checkagain ¬+ Next 


No idea what you are supposed to do? Don't panic! للا‎ EE EN Ek Watch the tutorial video 


Pre-installation > Database Restoration KJ > Site Setup > Finished 


Pre-installation check Recommended settings 
If any of these items is not supported (marked as No) then please take actions to correct These settings are recommended for PHP in order to ensure full compatibility with Joomla. 
them. Failure to do so could lead to your Joomla! installation not functioning correctly. However, Joomla! will still operate if your settings do not quite match the recommended 
5 configuration 
Setting Current 9 
PHP Version >= 5.2.4 Yes Setting Recommended Current 
Zlib Compression Support Yes کب ات‎ [orr] [orr] 
XML Support Display Errors [oir | [or] 
Database Support File Uploads [On | c 
MB Language is Default Magic Quotes Runtime [otf | [ott] 
Magic Quotes GPC [ott | [or] 
MB String Overload Off 
Output Buffering [ott | [ott] 
INI P; E rt 
يت‎ ui des Session Auto Start [ott | [ott] 
JSON Support 
pP Native ZIP support [On | cl 
configuration. php Writeable Yes 
Backup Information Site information 


e GNU GPL version 3 


عند ظهور الصفحة السابقة نقوم بالضغط على الزر الأزرق اعلى على اليمين (Next)‏ وستظهر الصفحة التالية ; 


» Skip Restoration = Next 
No idea what you are supposed to do? Don't panic! E ECEN EIE TE E 


Pre-installation > Database Restoration > Site Setup > Finished 


Restoration of site's main database 


Connection information Advanced options 
Database type MySQLi (preferred) ME With existing tables Backup © 
Database server host localhost e Database table name | e9uo8 e 
name prefix 
Username | username e @ Suppress foreign key checks © 
Pi d e 
ARRS Use REPLACE instead of INSERT @ 
Database name database e 
Force UTF-8 collation on database 9 
Force UTF-8 collation on tables 9 
Fine tuning 


Il ved 
the GNU GPL version 3 


لاحظ في الصورة أعلاه في هذه الصفحة نقوم بعمل الاتصال بقاعدة البيانات من خلال ملئ الحقول على اليسار حيث : 

Database type‏ : نوع قاعدة البيانات (تترك كماهي). 

Database server host name‏ : اسم السرفر المستضيف لقاعدة البيانات ويختلف من سرفر لآخر ولابد من كتابة اسم السرفر. 
User name‏ : اسم المستخدم لقاعدة البيانات. 

: كلمة المرور. 

Database name‏ : هنا نكتب اسم قاعدة البيانات. 
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بعد ملئ الحقول على يسار الصفحة نواصل عملية التركيب ونقوم بالضغط على الزر الأعلى على اليمين (Next)‏ وستظر الصفحة التالية وكما في 


الصورة: 


Database restoration 


Restored 335.23 Kb 


Total size 554.42 Kb 


Estimated time left 11 minutes 


ستظهر الصورة أعلاه لعمل الاتصال ونقل بيانات الموقع الى قاعدة البيانات الجديد gall‏ $293 على السرفر وبعد الانتهاء ستظهر الصفحة كما في 


الصورة التالية: 


Database restoration 


Click the button below to close this dialog and proceed to the next step of this 
installer 


كما في الصورة أعلاه تظهر الرسالة بتمام العملية وبنجاح. نواصل التركيب ونقوم بالضغط على الزر الأخضر (Next step)‏ ستظهر الصفحة التالية: 


Super User settings 


Super User admin 


ME 
E-mail en yusufgyahoo com e 
Password  |......... e 
Password (repeat) | ......... e 


كما نلاحظ سنحتاج لتعبئة الحقول الخاصة Super User Settings-‏ فقط وبقية الحقول نركها كما في في الحقل الأول سيكون اسم مدير مدير الموقع 
الحقل الثاني للبريد الالكتروني الخاص بمدير الموقع. الحقلين التاليين لكلمة المرور. ثم نواصل التركيب بالضغط على (Next)‏ وستظهر الصفحة التالية: 


www.techpio.net 


YYA 


No idea what you are supposed to do? Don't panic! IPPEZCERTUDRSTSTIUEN ETRIERI 


Pre-installation > Database Restoration > Site Setup > Finished 


Even though your site has been successfully restored, differences in server configuration over time or between different servers (of the same or a different host) can cause 
issues with your restored site. While we cannot provide support for such issues, we have collected the most common problem causes (and their solutions) in our troubleshooter 
documentation. For your convenience, we are providing you with the link to this document: 


https://www.akeebabackup.com/documentation/troubleshooter/prbasicts.html 


As long as the installation folder exists on your site, Joomla! will not load and ANGIE (this site restoration script) will be shown again whenever you're trying to access your site. You 
will have to remove this directory using one of the following ways 


* If you are using Akeeba Kickstart or the integrated restoration of Akeeba Backup just close this browser window / tab and click on the Clean Up button in the other browser 
window / tab where Kickstart or the integrated restoration is still open 

٠ If you are not using any of the above click on the following button 

e If all else fails you can use your FTP programme to remove the installation directory from your website. You may also have to rename htaccess.bak to .ht 
php. ini .bak tO php.ini if these files exist 


ess and/or 


You may want to print out this page for your reference. 


GNU GPL version 3 


من خلال الصفحة في الصورة اعلاه نقوم بالضغط على الزر الأحمر (Remove The installation directory)‏ وستظهر النافذة التالية: 


Ready to start using your site! 


The installation directory has been removed and your site is ready for use. 
Please note that, as we mentioned earlier, due to server configuration differences 
you may have some issues working with your site. If this happens please consult the 


following URL. 


https://www.akeebabackup.com/documentation/troubleshooter/prbasicts.html 


Tip: Bookmark that URL for your future reference 
Now click the button below to visit your site's front-end 


it your site's front-end 


نقوم بالضغط على الزر الاخضر اعلاه وسيتم التوجه للموقع وبذلك يكون قد انهينا تركيب RÀ gall‏ وسيكون شكل الموقع النهائي كما في الصورة : 
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الرئيسية خدماتنا حول رواد التكنولوجيا الأقسام أخباررواد التكنولوجيا ‏ اتصل بنا 


TPY‏ الرواد لتكنولوجيا المعلومات 
bod‏ 


K‏ شبكات وصيانة حاسوب كت 


iPhone Applications و لكك‎ E الستزاقة‎ E 
) 
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SEO 


SEARCH ENGINE OPTIMIZATION 


تحسين محركات البحث 
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NOTOS 
SEO الباب السادس‎ 


مقدمة حول محركات البحث 9 SEO‏ 
المواقع الالكترونية عبارة عن واجهة رسمية وتسويقية للمؤسسة اضافة الى ان المواقع الالكترونية تعتبر اداة تسويق للمؤسسة سواء التجارية أو 
غيرها ولكثرة المواقع الالكترونية وتشابه مجالاتها وبالألاف وربما بالملايين فلابد من يكون لكل موقع الأولوية في محركات البحث والوصول إليها. 


هناك الملايين من المتصفحين الذين يستخدمون محركات البحث للبحث عما يريدونه وليس كل موقع إلكتروني وإن كان مصمم بواجهة جميلة ومميزة 
بأن يكون في صدارة المواقع في محركات البحث. هنا مميزات تقنية وفنية لابد من توفرها وأن يكون الموقع الالكتروني صديق لمحركات البحث. وجدت 
تقنية نستطيع من خلالها أن نجعل الموقع الالكتروني أكثر تأقلما مع محركات البحث وتقنيات بروزه كموقع له أولوية الظهور في محركات البحث. 


* (Search Engine) البحث‎ d ja ما هو‎ 


هو عبارة عن اداة في الانترنت يقوم بعمل بحث في فهرس ووثائق عن مصطلح أو عبارة او نص معين بواسطة المستخدم أو المتصفح. ويستخدم هذا 
الاسم عادة للإشارة إلى محركات البحث على شبكة الإنترنت الكبيرة التي تبحث من خلال مليارات الصفحات على شبكة الانترنت. 


* Search Engine Optimization (SEO) ماهي‎ 


ترجمتها (تحسين محركات البحث) ولكن التعبير الصحيح هو التحسين الفني الأمثل للموقع الإلكتروني ولكون الموقع الالكتروني له الأولوية والحضور 
في فهارس محركات البحث وضمن ترتيب مميز وأن يكون صديق لها. و تساعدنا هذه التقنية لتحسين ترتيب الصفحات بواسطة العوامل المؤثرة 
وتحسينها للحصول على ترتيب مميز في محركات البحث. 


أشهر محركات البحث 


.( Google — Yahoo - MSN - Bing — Ask ( من أشهر محركات البحث‎ 


كيف تعمل محركات البحث 
cis jl‏ العنكبوتي (Spider *crawls")‏ على الويب للعثور على الصفحات والنصوص وايجاد الوثائق الجديد بواسطة الروابط (hyperlinks)‏ 
الموجودة في الصفحات وفي قواعد البيانات في المواقع الالكترونية. 


تقوم محركات البحث بفهرسة الوثائق والنصوص والأكواد وحفظها في قواعد بيانات خاصة بها وتحديثها كل فترة. 


عند طلب المستخدم لأي كلمة أو مصطلح بواسطة البحث عن يقوم محرك البحث بالبحث عن هذه الكلمة أو الجملة في قاعدة بيانات المفهرسة (وليس 


تقوم محركات البحث بترتيب النتائج التي تم البحث عنها بواسطة خوارزمية ترتيب (ترتيب الأولوية). 


MOBILE: 00967 714490030 TO E 
MOBILE 2: 00967 772755202 Email: info@techpio.net ا‎ 


ns 
لماذا نهتم بالتعامل مع محركات البحث‎ 
: نهتم بالتعامل مع محركات البحث لعدة أسباب ومنها‎ 
تعتبر محركات البحث هي المصدر الأول والوسيلة الأولى للوصول الى المعلومة على شبكة الانترنت.‎ 


نهتم بمحركات البحث لكي يكون الموقع الخاص بنا صديق لها وتكون له الأولوية في الظهور في النتائج الأولى لأن الباحث لا يرى في الغالب بعد العشر 
النتائج الاولى وربما أقل. 


موفر من حيث تكاليف الإعلانات. 


نصائح عامة لتطوير استراتيجية جيدة فى (SEO)‏ 
تعيين الكلمات المفتاحية للموقع وللعلم تعتبر الكلمات المفتاحية الروح لل(517500) فهي إما تجعل الموقع في القمة أو العكس وتم عملها في أكواد الموقع 
سواء للصفحات الرئيسية أو الفرعية. ويمكن الاستعانة بوسيلة ( Google's Keyword Tool‏ ( وهي وسيلة مدفوعة (بمقابل) بالنسبة للمؤفسسات 
التجارية. 


القيام بعمل كلمات مفتاحية في عدة صفحات للموقع ويفضل أن تكون في العناوين للصفحات والروابط ضمن الصفحات أو القوائم لتعدد فرص واحتمالية 
ظهور الصفحات أو بعضها او أحدها على الاقل. 


إنشاء مدونة إن أمكن. إن انشاء مدونة للموقع تساعد في تعدد فرص الوصول للموقع من خلال الكلمات والنصوص والمقالات أو المشاركات والتعليقات 
المضافة في المدونة والمختصة في نفس الكلمات المفتاحية التي يتم البحث عنها. كأن يتم عمل مدونة في مجال المواقع الالكترونية في موقع متخصص 
في المواقع الالكترونية. 


العمل على مشاركة الرابط الخاص بالموقع مع مواقع أخرى ونشره ضمن صفحات التواصل الاجتماعي وادلة المواقع الالكترونية وعمل رابط للموقع 
ضمن مدونات أو منتديات خارج الموقع والتوجيه إليه. 


كن على إطلاع وبحث دائم في كل جديد بخصوص (SEO)‏ 
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(SEO Basics) أساسيات‎ 


عمل عناوين دقيقة وواضحة 


من أهم العوامل في SEO-‏ عمل العناوين الواضحة والفريدة من نوعها ويتم عمل العناوين كما تعلمنا مسبقا داخل الوسم أو الكود «TITLE»‏ حيث 
أن هذا العنوان يخبر محرك البحث والمستخدم على حد سواء بالموضوع الموجود على الصفحة. بالإضافة إلى أن العناوين يتم عرضها في نتائج البحث 
لهذا فإن اختيار العناوين مهمة وتعمل دور التسويق وجذب الانتباه للصفحة او الموقع او الموضوع. يجب ان يكون العنوان مرتبط تماما بمحتوى 
الصفحة وان لا يكون عكس ذلك. بالإضافة لأن يكون لكل صفحة عنوان خاص بها. كما ينصح بعمل عناوين صغيرة ووصفية في نفس الوقت. 


مثال : 


عمل عنوان داخل وسم (TITLE)‏ 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


5j4,5«/title»‏ المواقع الالكتروتية<21516> 
</head>‏ 


ظهور عنوان الخبر ضمن نتائج البحث عن (المرصد العربي للعمل التطوعي) في محرك البحث جوجل . 


صحيفة 26سبتمبر - افتتاح المرصد العربي للعمل التطوعي ... 


الدول العربية الهادف إلى نتر مقاهيم 


عمل العلامة الوصفية (Meta Description)‏ 


إن العلامة الوصفية تخبر محركات البحث عن خلاصة المحتوى للصفحة وما تتحدث عنه لذلك دائما يتوجب الاهتمام بالوصف الخاص بالصفحات او 
العناوين والأخبار. وتكون البيانات الوصفية عبارة عن جملة معينة وعدة كلمات تصف المحتوى للصفحة كما تكتب هذه البيانات في داخل منطقة 
«head»‏ الخاصة بصفحة الويب. 


مثال : 


عند البحث عن (المرصد العربي للعمل التطوعي) في محرك البحث جوجل تظهر في النتيجة عنوان الموقع بالإضافة الى (Meta Description)-!‏ 
التي تحت عنوان الموقع. 


25 seconds) 


المرصد العربي للعمل التطوحي 


s page 
المرصد العريي للعمل التطوحي تم تأسيس المرصد العريي للعمل التطوحي التابع‎ 


صورة لعمل بيانات وصفية (Meta Description)‏ في سطر ۷: 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
>ا1٤1ع<ةيتورتكلالا <212816:/>دورة المواقع‎ 


«meta name-"description" content=" kha:s وصق الموقع ..وصف‎ Lia"> 
</head> 


عند كتابة البيانات الوصفية علينا ان نتجنب كتابة بيانات بعيدة عن محتوى الصفحة ولا تمت لها بصلة. كما ان لا نضيف اوصاف عامة مثل (هذه 
الصفحة .. - صفحة حول .... ) . ان تكون البيانات الوصفية مطابقة للكلمات المفتاحية وان لا تكون مختلفة. كما علينا ان لا نقوم بعمل بيانات وصفية 
واحدة لجميع الصفحات وانما كل صفحة تحوي بيانات وصفية تصف محتوى الصفحة. 


تحسين هيكل الموقع الالكتروني 


تحسين هيكل عناوين المواقع (روابط الموقع او الصفحات (URLs‏ 


نقصد بعناوين الموقع الروابط (URLs)‏ وهنا نقوم بعمل روابط تصب في دعم الترتيب للموقع الالكتروني. ولكي نقوم بعمل جيد لإشهار محتوى الموقع 
علينا الربط بين التقنيات التي نستخدمها ونقوم بعمل نوع من التكامل بينها فمثلا البيانات الوصفية والعنوان والكلمات المفتاحية كيف نقوم بعمل تكامل 
معها ومع هيكل او رابط (عنوان الشريط للموقع). 


هناك روبط غير صديقة والتي تقوم يمر من خلالها محرك البحث ويكتفي فقط بالبيانات الوصفية او العنوان لمحتوى الصفحة ومثال على بعض الروابط 
التي نقوم بتجنب عملها قدر الامكان مثل الرابط الموجود في الصورة: 


€ X | D volobs.org/indexphp/component/content/article/98 


كما في الصورة يتضح من الرابط الخاص بها عدم الوضوح او الفهم للأرقام الموجودة فيه وقد تكون عبارة عن رموز أحيانا. 


وهنا ايضا روابط صديقة وتقوم بعمل تكامل مع عنوان الصفحة الخاص بالمحتوى وايضا مع البيانات الوصفية والكلمات المفتاحية للموقع او صفحات 
الموقع ومثال على الروابط الصديقة 


€ X | D volobs.org/index.php/2013-04-16-06-15-30/890-C 


كما نلاحظ الصورة أعلاه لرابط صديق لمحركات البحث بالإضافة الى انه رابط لموضوع معين الا انه يخبر المتصفح ومحرك البحث بمحتوى الصفحة 
ايضا. كما ان الرابط يظهر في محركات البحث ضمن النتائج كما في الصورة: 


(0.91 (عدد التو ني:‎ ce ill من‎ 0 oi 


tat 


مركز لبنان للعمل النطوعي بنفذ دورة تدريبية عن كبفية .. 


..-مركز-ليتان-للعمل-التطوعي-ينقذ -دورة-تدريبية عن- org/.../185^‏ بكم Y‏ 
نقذ مركز لبنان للعمل التطوّعي. دورة تدريبية لعدد من cle Shill‏ عن كيفية إبتكار أنشطة تصب فى 


خدمة المجتمع. من mll s a‏ ط إلى التمويل والتنفيذ واختيار المكان 


نلاحظ كيف ظهر العنوان في محرك البحث في جوجل عند البحث عنه وكما نلاحظ أيضا الرابط تحت العنوان والذي يحمل اللون الاخضر يحتوي على 
الكلمات الموجودة ضمن الرابط. كما انها تكون مفيدة ضمن الزحف العنكبوتي الخاص بمحركات البحث (crawling)‏ 


عند عمل الروابط نتجنب بعض الاشياء ومنها عمل اسم معين ومكرر في روابط الصفحات (عدم تكرار العنوان ضمن الرابط). كما نتجنب عمل الروابط 
الطويلة وغير الهامةء كما نتجنب ايضا عنوان مكرر لكل الصفحات. 
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وعم 
تسهيل التنقل والتصفح داخل الموقع الالكتروني 


التنقل داخل الموقع الالكتروني مهم بالنسبة للشخص المتصفح فالموقع المرتب من حيث البيانات والأقسام والملفات والمجلدات يجعل الموقع سهل 
التصفح والفهم للمستخدم ولمحرك البحث بالإضافة الى سرعة التنقل بين العناوين والصفحات. 


نقوم بعملية التقسيم للموقع والأقسام وكل بند يندرج ضمن القسم الخاص به سواء الاقسام المتفرعة من قسم آخر وهكذا. بالإضافة الى عمل ترتيب 
لمحتوى الموقع من حيث المجلدات والصورة وترتيبها بشكل منظم ومثال على ذلك كما في الصورة: 


about 


articles 


price-guldes 


1950-1998 


2000- present 


The directory structure 
for our small website on 
baseball cards. 


عمل خارطة للموقع بصيغة XML‏ 


تسهل خريطة الموقع والتي تكون من نوع KML‏ على محركات البحث عملية استكشاف محتوى الموقع الالكتروني وصفحاته ويتم عمل خارطة الموقع 
من هذا النوع إما يدويا او عن طريق مواقع على الانترنت تقوم بهذه الوظيفة وبوسطة وضع موقعك الالكتروني واعطائك خارطة للموقع الخاصة بك. 


بعد اتمام عملية انشاء الخارطة الخاصة بالموقع ضمن ملف XML-‏ يتم ادراجها في Webmaster tools)‏ ) ولإنشاء خارطة موقع يمكنك عملها 
على احد المواقع الالكترونية مثل XML Sitemap Generator)‏ ) . 
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مثال لخارطة موقع (XML)‏ 


This XML file does not appear to have any style information associated with it. The document tree is shown below. 


w«urlset xmins-"http://www.Sitemaps.org/schemas/sitemap/0.9"» 
v«url» 
«loc»http://www.techpio.net/php«/loc» 
x 


«loc»http://www.techpio.net/php/index.php«/loc» 
«priority»0.5«/priority» 
«changefreq»daily«/changefreq» 

«/url» 


..X«/url» 
..X/url» 


€«loc»http://www.techpio.net/php/det news.php?id-10«/1oc» 
Xpriority»0.5«/priority» 
«Xchangefreq»daily«/changefreq» 

«/url» 


«loc»http://www.techpio.net/«/loc» 
«priority»0.5«/priority» 
Xlastmod»2014-04-06T15:19:23400:00«/1astmod» 
Xchangefreqg»daily«/changefreq» 
«/url» 
«/urlset» 


كما في الصورة أعلاه نلاحظ كيفية عمل خارطة للموقع وكمثال على ذلك تم عمل خارطة للموقع الذي قمنا بتطبيقه (التطبيق العام (PHP‏ وتظهر في 
الصورة أعلاه الخارطة وهي تحوي القائمة ومحتوياتها. 


التحسين الامثل لمحتوى الموقع 


المواقع المثيرة للاهتمام تزيد من الاعتراف بها 


كلما كانت الموقع الالكتروني مثار اهتمام عند الاخرين كلما كانت عملية الزيارة تزداد مع الوقت بالإضافة الى تسويق المتصفحين للموقع 
وإخبار الآخرين للطلاع عليه والشهادة بتميزه وامكانية مشاركته مع الآخرين في المدونات وصفحات التواصل الاجتماعي. لذلك اهمية 
المحتوى عامل مهم في زيادة الزيارات للموقع الالكتروني. 


إثراء المواضيع بالعبارات وعناصر المحتوى بالمصطلحات المتعلقة او التي لها علاقة بالمواضيع. 


في المواضيع التي تقدم ضمن الموقع لابد من اختيار الموضوع الأكثر أهمية وأن يراعى فيه اختيار العبارات المتعلقة بالموضوع وذلك 
لان المستخدم الذي يبحث عن هذا الموضوع قد يبحث عن كلمات اخرى غير العنوان لذلك نهتم بالعبارات والعناصر المرتبطة بالموضوع. 
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۳۷ 
حول محتوى الموقع 


في كتابة المواضيع في الموقع الالكتروني لابد من الالتزام ببعض الخصائص ومنها عدم التكلف في كتابة المواضيع وزيادتها ولكن يتم 
كتابة المواضيع بكل سهولة وتسهيل قراءتها. كما يتم تجنب عمل الشروحات أو الكتابة في الصور والسبب لأن هناك مستخدمين يريدون 
نسخ النص أو الشرح بالإضافة الى ان محركات البحث لا تتعرف على محتوى الصور (الشرح والمواضيع). 


كما يفضل ترتيب محتوى المواضيع من حيث التنظيم والتنسيق للنصوص والصور كي يعرف المتصفح بداية ونهاية الموضوع بالإضافة 
للمحتوى وأقسامه. 

التعامل مع الصور في الموقع الالكتروني 

عند عمل محتوى للموقع الالكتروني فإننا نأخذ في عين الاعتبار أهمية وجود الصورة الداعمة للموضوع وعليه فإن علينا دعم الصورة 


بخاصية بسيطة وهي خاصية (alt)‏ وقد تعلمناها مسبقا وتفيدنا في ظهور الصورة في البحث عن نص موافق للموضوع الخاص بنا في 
(البحث عن الصور). بالإضافة لتنظيم أماكن الصور وترتيبها وجعلها في مجلدات خاصة بها. 


استخدام وسوم العناوين (heading tags)‏ 


تبدأ العناوين من <1ط> الى <116> حسب الأهمية هذه العناوين تنوع أهمية المحتوى داخل المواضيع فالعناوين الكبيرة تشير للأهمية للمتصفح كماهي 
أيضا اكثر فهما لمحركات البحث ويفهمها محرك البحث حسب الأهمية (حجم النص). 


التعامل مع خوارزميات او برامج البحث 


استخدام ملف (robots.txt)‏ 


من الوسائل المستخدمة للتعامل مع محركات البحث انشاء ملف robots.txt-l!‏ وتكمن وظيفة هذا الملف في أنه يخبر محركات البحث في ما اذا كان 
بالإمكان الزحف لبعض اجزاء الموقع وترك بعضه. كما يجب أن يكون اسم الملف بهذا الاسم robots.txt‏ بالإضافة الى ان يكون في المجلد الرئيس 
للموقع. 

هناك في الموقع بعض الاجزاء التي لا تريد لمحركات البحث الوصول اليها وربما تعتبر غير مفيدة للمستخدم او المتصفح للموقع ولذلك يمكننا الاستعانة 
بملف ال701045.626 واعطاء بعض الاوامر للملف بالزحف لبعض المجلد او الصفحات وترك أخرى. يمكننا عمل الملف يدويا او الاستعانة بأدوات 
dasa‏ على موقع جوجل من خلال robots.txt generator‏ كما يمكننا الاستعانة بالإرشادات الموجودة ضمن صفحات الدعم الخاصة بجوجل على 
.using robots.txt files‏ 
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E 
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طريقة عمل ملف robots.txt‏ 


هنا بعض الاوامر التي يمكننا وضعها ضمن ملف الروبوتس للزحف على الصفحات او عدم الزحف عليها وعلى المجلدات ايضا ومنها : 


١ د‎ 


الكود أعلاه عبارة عن أمر يسمح لجميع العناكب بالزحف لمحتوى الموقع مثل جوجل و ياهو الخ. 


tf. 


الكود أعلاه لمنع محركات البحث من الزحف على الصفحة login.php‏ والموجودة داخل المجلد „admin‏ 


(Allow : ) كود"‎ 


Allow: /news 
Allow: /images 


الكود أعلاه مثال لعملية السماح للزحف على مجلدات معينة وكما في الكود (مجلد news‏ — مجلد images‏ (. 


(Sitemap:) ° 355 


Sitemap: http://www.techpio.net/sitemap.xml 
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ملاحظة : نظام جوملا يحوي ملف الروبوتس robots.txt‏ وموجود مسبقا وغالبا في المواقع الكود المستخدم هو Disallow‏ كما يمكننا الاستفادة 
أكثر حول ملف robots.txt‏ عن طريق الموقع المعروف (The Web Robots Pages)-‏ . 


استخدام كود rel="nofollow")‏ ) 


لأن الروابط الموجودة على الانترنت من الاولوية لمحركات البحث ولأن الزحف الخاص بمحركات البحث يعطي أولوية للروابط على الانترنت فهناك 
روابط لا نريد من محركات البحث ارشفة او الزحف على صفحات لا نريدها ان تظهر في نتائج محركات البحث يتم استخدام الكود rel="nofollow"‏ 


لمنع محركات البحث من ارشفة بعض الروابط . 


مثال: 


<a href-" http://www.techpio.net/private.php" rel="nofollow" <دج/>صفحة خاصة-‎ 


كما في الكود أعلاه اضفنا كود المنع على احد الروابط ax‏ الصفحات التي لا نريد عرضها على الاخرين ولا ارشفتها او نتائج محركات البحث. 


متابعة وترقية الموقع الالكتروني 


ليكون الموقع الالكتروني الخاص بنا ضمن المواقع الصديقة لمحركات البحث علينا أن نجعل الموقع الالكتروني محط اهتمام ومتابعة لمحتوى الموقع 
وحالته مع محركات البحث وهنا بعض النصائح العامة لمتابعة الموقع الالكتروني والتحسين من ظهوره في النتائج الاولى في محركات البحث: 


اضافة الموقع الالكتروني ضمن حساب خاص في جوجل وربطه واضافته الى محرك البحث جوجل وذلك عن طريق ) Google Webmaster‏ 


(Tools 
واصلاح اي اخطاء تعيق أرشفة الموقع.‎ (Google Webmaster Tools) متابعة حالة الموقع في‎ 


ربط الموقع الالكتروني بصفحات التواصل الاجتماعي وامكانية مشاركته في صفحات التواصل من المستخدمين. 
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أدوات مفيدة لتعزيز نجاح الموقع فى SEO‏ 


Find the source of your visitors, what they're 


"M Google Analytics 
viewing, and benchmark changes 


Run experiments on your pages to see what 


Google Website Optimizer 
.Will work and what won't 


If you don't want to go at it alone, these tips 


Tips on Hiring an SEO 
„should help you choose an SEO company 


Have questions or feedback on our guide? Let 


Google Webmaster Help Forum 
us know 


Optimize how Google interacts with your 


1 Google Webmaster Tools 
Website 


Design, content, technical, and quality 


Lazar Google Webmaster Guidelines 
.guidelines from Google 
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معد الكتاب الالكترونى 
) سيرة ذاتية ( 


FERT 
الاسم : يوسف صائلح علي الجرعي‎ 

تاريخ الميلاد : ٩۱۹۸م‏ 

الجنسية : اليمن تاريخ 

محل الميلاد : المملكة العربية السعودية - الرياض 


الإقامة : الجمهورية اليمنية — أمانة العاصمة 


معلومات التواصل : 
البريد الإلكتروني en yusuf yahoo.com:‏ 

رقم الهاتف الجوال: )« A VVYE£3« «Y‏ 3( أو جوال + واتس اب VV YVoo Y. Y)‏ 3( 
Al gall‏ ; صنعاء - أمانة العاصمة ( اليمن ( 

العنوان الإلكتروني : www.techpio.net‏ 

التعليم والمؤهلات: 

بكالوريوس نظم معلومات - جامعة صنعاء (كلية الحاسوب وتكنولوجيا المعلومات). 
دبلوم تصميم مواقع الكترونية ( معهد سيدز). 

المهارات والخبرة : 

إنشاء وإدارة وتدريب تصميم وادارة مواقع الكترونية. 

تسويق وإعلام إلكتروني. 

تصميم وإدارة نشرات إلكترونية. 


صيانة وحماية حاسوب. 
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